fix width calculation - try nr 2

klippa-app · Jan 30, 2024 · 38b6dd1 · 38b6dd1
1 parent b51d3bf
commit 38b6dd1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -55,13 +55,20 @@
 
 		<div style="width: 400px; margin-left: 300px;">
 			<klp-form-element caption="select something" style="margin-top: 200px; margin-bottom: 100px;">
-				<klp-form-select prefix="smeerpijp" [truncateOptions]="false" [options]="options" [multiple]="true" placeholder="Pick" formControlName="selector" (onSearch)="search($event)" (onEndReached)="loadMore()" (onBlur)="logSomething()" (onEnterKey)="enterKeyPressed()"></klp-form-select>
+				<klp-form-select [truncateOptions]="false" [options]="options" [multiple]="true" placeholder="Pick" formControlName="selector" (onSearch)="search($event)" (onEndReached)="loadMore()" (onBlur)="logSomething()" (onEnterKey)="enterKeyPressed()">
+					<ng-template klpSelectOptionTpl let-item="item">
+						<div style="display: flex; justify-content: space-between; height: 200px; border: 2px solid black; width: 100%;">
+							<div>{{item.name.substring(0, 30)}}</div>
+							<div>{{item.name.substring(0, 30)}}</div>
+						</div>
+					</ng-template>
+				</klp-form-select>
 			</klp-form-element>
 		</div>
 	</div>
 </klp-form>
 
-<div style="width: 650px; margin-left: 1200px; overflow: scroll; height: 500px;">
+<div style="width: 650px; margin-left: 100px; overflow: scroll; height: 500px;">
 	some cool stuff here <br />
 	some cool stuff here <br />
 	some cool stuff here <br />

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.12.1",
+  "version": "14.12.2",
   "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
@@ -200,14 +200,20 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 	private async setWidthBasedOnOptionsWidths(): Promise<void> {
 		if (this.truncateOptions === false) {
 			await awaitableForNextCycle();
-			const widths: Array<number> = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option > *')).map(
+			const optionRefs: Array<HTMLElement> = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option > *'));
+			const widths: Array<number> = optionRefs.map(
 				(e: any) => e.scrollWidth,
 			);
 			const maxWidth = Math.max(...widths);
 			const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
 			if (dropdownPanel) {
+				const firstOption = this.elRef.nativeElement.querySelector('.ng-option');
+				let padding = 0;
+				if (firstOption) {
+					padding = parseInt(getComputedStyle(firstOption).paddingLeft, 10) + parseInt(getComputedStyle(firstOption).paddingRight, 10);
+				}
 				dropdownPanel.style.minWidth = `${this.elRef.nativeElement.clientWidth}px`;
-				dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + 40, dropdownPanel.getBoundingClientRect().width)}px`;
+				dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + padding, dropdownPanel.getBoundingClientRect().width)}px`;
 				await awaitableForNextCycle();
 				const pickerWidth = this.elRef.nativeElement.getBoundingClientRect().width;
 				const dropdownPanelWidth = dropdownPanel.getBoundingClientRect().width;
@@ -286,7 +292,7 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 	public open = (): void => {
 		this.ngSelect.open();
 	}
-	
+
 	public close = (): void => {
 		this.ngSelect.close();
 	}