diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json index 0f90585..0edf416 100644 --- 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 index 563c4ff..cf28f62 100644 --- 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 index 03232a1..082a1ce 100644 --- 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 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 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;