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)
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.
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;
}
/* 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.
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
Regard.
Can you please try to assign
data-kt-menu-overflow="true" to the parent item of the submenu ?Regard.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
Thank you!
We have sent an activation link to your email.
Please click it and you are done.
Please click it and you are done.
Your email is confirmed. Please sign in to use our services.
