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)

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.

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;
}

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:

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.

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  :(