·  Spooky is a dryer setting.

20 Comments

  • Michele
    at · Reply

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

  • Jan Sequens
    at · Reply

    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!

  • Paul
    at · Reply

    I used Webkit-specific scrollbar CSS. See here:
    http://css-tricks.com/custom-scrollbars-in-webkit/

  • Jan Sequens
    at · Reply

    Thanks! I’ll check it out.

  • Jacob Tomlinson
    at · Reply

    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?

  • Jason Pokines
    at · Reply

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

  • Paul
    at · Reply

    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.

  • John
    at · Reply

    Demo?

  • ugate
    at · Reply

    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
    at · Reply

    @Paul Nice!

    @ugate thats awesome what you have going in the jsfiddle

  • Nachiket Darekar
    at · Reply

    thanx paul it’s very useful…

  • paulngumii
    at · Reply

    Good!!

  • Naazim
    at · Reply

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

  • Aosis
    at · Reply

    Fantastic! Works like a charm. Thanks a ton…

  • Sohair Ahmad
    at · Reply

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

  • Zia
    at · Reply

    Thanks a lot

  • Van Dewey Balao
    at · Reply

    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

  • amine ghandi
    at · Reply

    thank you it works

  • Leave a Reply to Paul Cancel reply

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