@porscheinformatik/clr-addons 15.2.0 → 15.2.2

package/fesm2020/clr-addons.mjs

@@ -636,7 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2023 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -646,8 +646,10 @@ class ClrDropdownOverflowDirective {
         this.defaultItemMinHeightRem = 1.5;
         this.marginBottomRem = 0.1;
         this.destroy$ = new Subject();
+        this.alreadyChecked = false;
+        this.heightFix = 27;
     }
-    ngAfterContentInit() {
+    ngAfterContentChecked() {
         // first trigger manually because the subscription lower only triggers after first change
         if (!this.nestedDropdownChildren?.length) {
             this.applyDropdownOverflowStyles();
@@ -669,14 +671,25 @@ class ClrDropdownOverflowDirective {
     applyDropdownOverflowStyles() {
         // the vertical position of our element in the current window
         const y = this.elRef.nativeElement.getBoundingClientRect().y;
-        const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
-        // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
-        for (const item of this.getAllChildDropdownMenuItems()) {
-            item.style.minHeight = itemMinHeightPx + 'px';
+        if (y !== 0 && !this.alreadyChecked) {
+            const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
+            // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
+            for (const item of this.getAllChildDropdownMenuItems()) {
+                item.style.minHeight = itemMinHeightPx + 'px';
+            }
+            let height = 0;
+            if (y + this.heightFix < window.innerHeight - y) {
+                height = window.innerHeight - y - this.heightFix;
+            }
+            else {
+                height = window.innerHeight - y;
+            }
+            this.elRef.nativeElement.style.maxHeight =
+                this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, height - this.convertRemToPixels(this.marginBottomRem)) +
+                    'px';
+            this.elRef.nativeElement.style.overflowY = 'auto';
+            this.alreadyChecked = true;
         }
-        this.elRef.nativeElement.style.maxHeight =
-            this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
-        this.elRef.nativeElement.style.overflowY = 'auto';
     }
     removeDropdownOverflowStyles() {
         for (const item of this.getAllChildDropdownMenuItems()) {