resize dropdown panel on scroll

klippa-app · Jul 13, 2023 · e15d632 · e15d632
1 parent 5e122e4
commit e15d632
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@klippa/ngx-enhancy-forms",
- "version": "14.1.5",
+ "version": "14.1.6",
  "publishConfig": {
  "access": "public"
  },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss
@@ -250,11 +250,13 @@ ng-select.showErrors {
  background-color:#fff;
  color:rgba(0,0,0,0.87);
  padding: 8px 10px;
+ display: flex;
  div {
  white-space: nowrap;
  }
 }
 :host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{
+ display: block;
  div {
  overflow: hidden;
  text-overflow: ellipsis;

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.ts
@@ -102,6 +102,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
  this.onEndReached.emit();
  }
  this.lastItemIndexReached = Math.max(lastItemIndex, this.lastItemIndexReached);
+ this.setWidthBasedOnOptionsWidths();
  }
 
  searchQueryChanged(searchQuery: string): void {
@@ -128,7 +129,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
  const maxWidth = Math.max(...widths);
  const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
  if (dropdownPanel) {
- dropdownPanel.style.width = `${maxWidth + 40}px`;
+ dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + 40, dropdownPanel.getBoundingClientRect().width)}px`;
  }
 
  let current = this.elRef.nativeElement;