20 Comments

I’m pretty sure I only understood half of what you wrote!!!

Nice work. One question, how did you manage to make the scrollbars look that nice? I can see some jQuery plugins around; however, that seems to collide Bootstrap code when I try to aplly them to my Bootstrap dropdowns. Thanks!

Thanks! I’ll check it out.

Do you have any idea of how to apply this to a sub menu as your current solution only works for a main menu with no sub menus?

Hopefully you’re not still waiting on this answer, Jacob, but for others visiting this page – To make it work for the submenu, use this instead:

.dropdown-submenu:hover > .dropdown-menu {
max-height: 400px;
overflow: hidden;
overflow-y: auto;
}

Yes, that will work for children. But there’s no way to implement this for both the parent menu and its submenu. For that, you’d need a totally different approach.

Great post! It inspired me to come up with another solution that has:

No JavaScript
Does not interfere with the layout/CSS of the menu you’re trying to scroll content for
Works with multiple scroll-menu in the same dropdown-menu
Works with dropdown-submenu
Works in responsive mode and mobile/touch enabled
Allows for static headers and footers that will not scroll with the content using the normal list items
The scroll-menu will grow dynamically until it reaches the max-height (at which point it will show a vertical scrollbar for each scroll-menu)

Example: http://jsfiddle.net/XKEmy/
See comment: https://github.com/twitter/bootstrap/issues/1989

Arindam Biswas · August 1, 2013 at 12:49 am

@Paul Nice!

@ugate thats awesome what you have going in the jsfiddle

Nachiket Darekar · April 23, 2014 at 11:28 pm

thanx paul it’s very useful…

Just Brilliant!!! Many thanks dude!!! Perfect fix!!!

Fantastic! Works like a charm. Thanks a ton…

Sohair Ahmad · June 22, 2016 at 5:40 am

what if drop down have submenu, those submenu will not be shown

I have the same issue, did you resolve it somehow?

I do not remember correctly, but I think I adjusted z-index in CSS

Thanks a lot

Van Dewey Balao · April 3, 2017 at 3:43 am

Hi Paul, can you help me unhide the scroll bar of my searchbox results. As you can see in my attached screenshot there’s no vertical scrollbar to see the other results. Please help me. https://uploads.disquscdn.com/images/7792b800b7fd62aaeeeb8ed3caa5cf2dea134b47812ecfa03f85883dfde0ea3f.png

thank you it works

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top