How can I apply automatic overflow-y scroll to drop down menu at the top.
Trying to get a sub-menu to automatically apply overflow-y for whenever the list of elements in it is longer than the current view. I have tried simply adding overflow-y with a max-height as style attributes, but that does not work
Replies (8)
Code will be provided in 48 hours.
Hi,
In the demo1 preview you can see a working example of a scrollable submenu where the scrollbar appears only when needed:
<img src="https://i.imgur.com/B503ycC.png" alt="" class="w-100"/>
Regards.
Thanks for getting back. The issue is not that I can't get a scrollbar, it's having a scroll bar in the top menu while items in the list have sub-menu items, and having those sub-menu items appear on hover. That's where the issue is.
Hi,
Can you please try to assign data-kt-menu-overflow="true" to the parent item of the submenu ?
Regard.
Update: I've come to realize the following. You can’t have a dropdown menu show outside of a box that is not overflow:visible. Overflow other than visible will contain all the overflow inside the scroll box. Any ideas anyone?
Hi,
Can you provide more info? Is it a menu in the content or in the layout(sidebar or header). Which demo are you using? Are you referring to the KTMenu examples ? If possible please provide the code or test link.
Regards.
Apologies for the late response. Referencing the code sample below, yes I am referring to the KTMenu examples. However, I think this issue has more to do with how the overflow and max-height work in general. Regardless, what I'm trying to do is if a user has multiple entries under the sub-menu item "Applications" that fill up or overflow the entire vertical length of the screen, I'd like to automatically apply a vertical scroll and cap the container to a max-height of let's say 640px. While I can get this done by applying a CSS class to this line:
/* Sample CSS code */
.menu-sub-lg-dropdown {
max-height: 640px;
overflow-y: auto;
}
<!-- Line in question from source code below -- >
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px" >
Doing so forces the inner menu items to display inline, and not to the left or right of the screen which is the natural behavior of the drop-down menus.
<!-- source code extracted -- >
<div data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion me-lg-1 show menu-dropdown">
<span class="menu-link py-3">
<span class="menu-title">DEVELOPER</span>
<span class="menu-arrow d-lg-none"/>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px show" data-popper-placement="bottom-start" >
<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
<span class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-person fs-2"/>
</span>
<span class="menu-title">Applications</span>
<span class="menu-arrow"/>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px" >
<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
<span class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">V2 V2acc (Dev)</span>
<span class="menu-arrow"/>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg py-lg-4 w-lg-225px" >
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/summary/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Summary</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/enrollments/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Enrollments</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/verifications/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Verifications</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/liveness/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Liveness</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/server-log/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Server Log</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/enhancements/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Enhancements</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/clients/10001">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">User Profiles</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
<span class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">V2 V2acc (Prod)</span>
<span class="menu-arrow"/>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg py-lg-4 w-lg-225px">
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/summary/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Summary</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/enrollments/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Enrollments</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/verifications/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Verifications</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/liveness/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Liveness</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/server-log/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Server Log</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/enhancements/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">Enhancements</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="/u/apps/clients/10003">
<span class="menu-bullet">
<span class="bullet bullet-dot"/>
</span>
<span class="menu-title">User Profiles</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-3" href="#sample" target="_blank" '="">
<span class="menu-icon">
<i class="bi bi-code-square fs-3"/>
</span>
<span class="menu-title">API Reference</span>
</a>
</div>
</div>
</div>
Update: I can get the overflow to work partially. I say partially because now if I apply a css class with max-height set to some value and overflow-y set to auto, then any item in that drop down menu that may have child elements no longer display to the right, but start displaying inline.
