fix for vertical pickers

klippa-app · Jan 12, 2024 · 2809329 · 2809329
1 parent 8f25031
commit 2809329
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -95,10 +95,20 @@
 	</ng-template>
 </klp-form-select>
 
-<div style="width: 300px; position: absolute">
-	<klp-form-select [options]="staticOptions" orientation="vertical"></klp-form-select>
-</div>
-
 <klp-form-button [clickCallback]="slowClick">
 	async button
 </klp-form-button>
+
+<div style="width: 300px; position: absolute">
+	<klp-form-select [options]="staticOptions" [truncateOptions]="true" orientation="vertical"></klp-form-select>
+</div>
+
+some cool stuff here <br />
+some cool stuff here <br />
+some cool stuff here <br />
+some cool stuff here <br />
+some cool stuff here <br />
+some cool stuff here <br />
+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.11.3",
+  "version": "14.11.4",
   "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
@@ -265,6 +265,10 @@ ng-select.showErrors {
 	::ng-deep .ng-dropdown-panel {
 		visibility: hidden;
 	}
+
+	&.verticalOrientation {
+		overflow: initial;
+	}
 }
 :host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{
 	border-bottom: 1px solid #e3e3e3;

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
@@ -181,12 +181,15 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 	}
 
 	private setFixedDropdownPanelPosition = () => {
+		const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
+		dropdownPanel.style.visibility = 'initial';
+		if (this.orientation === 'vertical') {
+			return;
+		}
 		const difference = this.anchorAbsolute.getBoundingClientRect().top - this.anchorFixed.getBoundingClientRect().top;
 		this.dropdownPanelOffsetY = difference;
 
-		const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
 		dropdownPanel.style.position = 'fixed';
-		dropdownPanel.style.visibility = 'initial';
 		this.setPanelOffsets();
 	};
 
@@ -238,7 +241,12 @@ export class SelectComponent extends ValueAccessorBase<string | string[]> implem
 		const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
 		const scrollPositionOffset = `translate(${this.dropdownPanelOffsetX}px, ${this.dropdownPanelOffsetY}px)`;
 		const dropdownPositionOffset = this.dropdownPositionToUse === 'top' ? `translateY(-100%) translateY(1px)` : '';
-		dropdownPanel.style.transform = [scrollPositionOffset, dropdownPositionOffset].join(' ');
+		if (this.orientation === 'vertical') {
+			dropdownPanel.style.transformOrigin = 'top left';
+			dropdownPanel.style.transform = `rotate(90deg) translateY(-${this.elRef.nativeElement.getBoundingClientRect().width}px)`;
+		} else {
+			dropdownPanel.style.transform = [scrollPositionOffset, dropdownPositionOffset].join(' ');
+		}
 	}
 
 	private determineDropdownPosition(): void {