Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$ 969$
submenu is hidden behind scroll bar
Hey,
I have a menu that on hover I open a submenu, my main menu is limited with height and I added 'overflow-y-auto', the problem is when my submenu is opens, so it not opens on the right, its override the main menu.
my code:
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown p-0 w-100 w-lg-250px mh-200px overflow-y-auto show" data-popper-placement="bottom-start">
<div class="menu-item menu-sub sortable-list ui-sortable">
<div data-kt-menu-trigger="{default: "click", lg: "hover"}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion ui-sortable-handle" data-name="p2">
<div class="menu-link py-3">
<i class="bi bi-grid-fill pe-2 d-none d-md-block ps-1"></i>
<span class="menu-title">submenu</span>
<span class="menu-arrow"></span>
</div>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown p-0 w-100 w-lg-250px sortable-list ui-sortable" >
<div class="menu-item ui-sortable-handle" data-name="p2a175">
<!--Submenu links-->....
</div>
</div>
</div>
</div>
<div class="menu-item menu-sub sortable-list ui-sortable">
<!--Menu item links-->.....
</div>
</div>
</div>tried to use data-kt-menu-overflow="true", and data-kt-menu-attach="#parent_id" and it works, but it detach the submenu from my main menu.
Replies (3)
Hi,
Please try to set data-kt-menu-overflow="true" to the inner submenu toggle menu item which is inside the scrollable parent menu content as shown below:
<img src="https://i.imgur.com/CqmB8VZ.png" alt=""/>
Regards.
When using data-kt-menu-overflow="true" the submenu that opens is "hovered" and when moving with mouse on it, the main menu is closing.
Hi,
Can you try to wrap the scrollable menu parts as shown below and use data-kt-menu-overflow="true" for the submenu toggle menu item?
<div class="scroll h-200px">
<div class="menu-item px-3">
...
</div>
</div>This works as expected and you can have a scrollable menu and dropdown submenus.
if you need any further help please provide us with your menu's HTML code via https://gist.github.com/
Regards.
