Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(