feat(cxl-ui): [cxl-marketing-nav] resize child menus if they are shor…

…ter than their parent
conversionxl · Feb 23, 2023 · 1eb4302 · 1eb4302
1 parent 882d465
commit 1eb4302
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -252,10 +252,18 @@ export class CXLMarketingNavElement extends LitElement {
       const previousOverlay = overlays[overlays.length - 2];
       const previousListBox = previousOverlay.querySelector('vaadin-context-menu-list-box');
 
+      // Reset list box height.
+      listBox.style.height = null;
+
       requestAnimationFrame(() => {
-        if (listBox.offsetHeight > previousListBox.offsetHeight) {
-          overlay.style.top = topLevelOverlay.style.top;
+        // Check if the child list box is shorter then the parent's list box.
+        if (listBox.offsetHeight < previousListBox.offsetHeight) {
+          // Set the child list box height to the parent's list box height.
+          listBox.style.height = `${previousListBox.offsetHeight}px`;
         }
+
+        // Align the child overlay to the top of the top level overlay.
+        overlay.style.top = topLevelOverlay.style.top;
       });
     }