fix dropdown panel positioning

klippa-app · Jan 9, 2024 · 6b25358 · 6b25358
1 parent 2d6f648
commit 6b25358
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -59,7 +59,7 @@
 	</div>
 </klp-form>
 
-<klp-form-select [options]="options" [multiple]="true"></klp-form-select>
+<klp-form-select [options]="options" [multiple]="true" [truncateOptions]="false"></klp-form-select>
 {{testDate}}
 <klp-form-date-time-picker [(ngModel)]="testDate" [multiple]="true" [disabled]="true"></klp-form-date-time-picker>
 <klp-form-checkbox [(ngModel)]="isChecked"></klp-form-checkbox>

diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts
@@ -11,7 +11,7 @@ export class DemoComponent {
 
 	constructor(private fb: UntypedFormBuilder) {
 		setTimeout(() => {
-			this.options = [...this.options, {id : this.options.length, name: 'BLAAAAAAAAAAAAAAAAAAAAAAATBLAAAAAAAaaaaeghjwghwgkehwgkjehwjkghewkghe'}];
+			// this.options = [...this.options, {id : this.options.length, name: 'BLAAAAAAAAAAAAAAAAAAAAAAAT'}];
 		}, 1000);
 		this.myForm.patchValue({
 			oli: {
@@ -90,10 +90,10 @@ export class DemoComponent {
 	subForms = [];
 	options: AppSelectOptions = [
 		{id: 1, name: 'dra'},
-		// {id: 2, name: 'looooong gekwhjg kehjw gkjehw gjkehw gjkh ghegkw egwhj ej wgklej gklej glkj gklj gljkl gewgjkew'},
-		// {id: 3, name: 'jjj'},
-		// {id: 4, name: 'kkk'},
-		// {id: 5, name: 'lll'},
+		{id: 2, name: 'looooong gekwhjg kehjw gkjehw gjkehw gjkh ghegkw egwhj ej wgklej gklej glkj gklj gljkl gewgjkew'},
+		{id: 3, name: 'jjj'},
+		{id: 4, name: 'kkk'},
+		{id: 5, name: 'lll'},
 		// {id: 6, name: 'mmm'},
 		// {id: 7, name: 'mmm'},
 		// {id: 8, name: 'mmm'},

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.10.2",
+  "version": "14.10.3",
   "publishConfig": {
     "access": "public"
   },

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
@@ -155,6 +155,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.minWidth = `${this.elRef.nativeElement.clientWidth}px`;
 					dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + 40, dropdownPanel.getBoundingClientRect().width)}px`;
 				}
 
@@ -167,9 +168,8 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 					const spaceInParent = limitingParentContainer.clientWidth;
 					const spaceLeftOfElRef = this.elRef?.nativeElement.getBoundingClientRect().left - limitingParentContainer.getBoundingClientRect().left;
 					const spaceRightOfElRef = spaceInParent - spaceLeftOfElRef;
-					const shiftToLeft = dropdownPanel?.clientWidth - spaceRightOfElRef + 20;
-					if (shiftToLeft > 0) {
-						dropdownPanel.style.left = `-${shiftToLeft}px`;
+					if (spaceRightOfElRef < dropdownPanel?.clientWidth) {
+						dropdownPanel.style.right = `0px`;
 					}
 				}
 			});