fix CascadeSelect panel align issue (Issue primefaces#16910)

umyanl · Dec 12, 2024 · 5f62cf4 · 5f62cf4
1 parent 1ba3274
commit 5f62cf4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/primeng/src/cascadeselect/cascadeselect.ts b/packages/primeng/src/cascadeselect/cascadeselect.ts
@@ -319,7 +319,7 @@ export class CascadeSelectSub extends BaseComponent implements OnInit {
             (onHide)="hide($event)"
         >
             <ng-template #content>
-                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches() }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches(), 'bottom-aligned': transformOrigin?.includes('bottom') }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
                     <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                     <div class="p-cascadeselect-list-container" [attr.data-pc-section]="'wrapper'">
                         <p-cascadeselect-sub
@@ -689,6 +689,8 @@ export class CascadeSelect extends BaseComponent implements OnInit {
      */
     @ContentChild('clearicon') clearicon: Nullable<TemplateRef<any>>;
 
+    transformOrigin?: string;
+
     _showTransitionOptions: string = '';
 
     _hideTransitionOptions: string = '';
@@ -1388,6 +1390,7 @@ export class CascadeSelect extends BaseComponent implements OnInit {
             const activeOptionPath = this.activeOptionPath();
             if (isNotEmpty(activeOptionPath)) {
                 this.overlayViewChild.alignOverlay();
+                this.transformOrigin = this.overlayViewChild.overlayEl?.style?.['transform-origin'];
             }
         });
     }

diff --git a/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts b/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts
@@ -180,6 +180,11 @@ p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect-label.p-placeholder {
     top: 0;
 }
 
+.bottom-aligned .p-cascadeselect-option-active > .p-cascadeselect-option-list {
+    top: auto;
+    bottom: 0;
+}
+
 .p-cascadeselect-option-content {
     display: flex;
     align-items: center;