From 1eb430223a77cc649ce995ebe934d7cf99d61971 Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Thu, 23 Feb 2023 10:51:38 -0500 Subject: [PATCH] feat(cxl-ui): [cxl-marketing-nav] resize child menus if they are shorter than their parent --- packages/cxl-ui/src/components/cxl-marketing-nav.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index e38167004..e4723e549 100644 --- 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; }); }