Bootstrap: support very long dropdown menu

[iron9light]

Add

.dropdown-menu {
    max-height: 500px;
    overflow-y: auto;
}

We can make a nicer scroll bar too.

[led]

Would amend this to accommodate any egregiously long menu entries.

.dropdown-menu {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

[mdo]

First, don't let dropdowns get that long :).

Second, I don't want to add any overflow because that crops the caret we add to navbar dropdowns.

[balexandre]

First, don't let dropdowns get that long :).

@markdotto Sometimes we really need it, How would you represent, for example, this list:

We do have a "View All" page, but to find quickly a gift card, we have those 2 custom dropdown lists that I'm now swapping for BootStrap Framework.

a simple draft:

All ideas are greatly appreciated.

[thezoggy]

go look up 'choosen'.

[sumityadav]

Or select2 (http://ivaynberg.github.com/select2/)

Thanks,
Sumit

On Thu, Oct 4, 2012 at 3:14 PM, thezoggy [email protected] wrote:

go look up 'choosen'.

—
Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/1989#issuecomment-9135982.

[iatek]

I resolved the very long dropdown issue by using Bootstrap Select (https://github.com/silviomoreto/bootstrap-select) instead. Works perfect for my case.

[bryan610]

I know this is a little late for iatek, but I made a long list work also with: From bootstrap.css: .pre-scrollable {
max-height: 340px;
overflow-y: scroll;
} by adding

in the html.

[ugate]

If anyone is still interested in a fix for this. I got it working with a relatively simple and non-intrusive approach using the built-in dropdown-menu with just CSS and an extra dropdown-menu. JFiddle example and blog entry. It offers the following benefits:

• 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)

[brettryan]

Hey @mdo can you define what is a "very long menu"?

I'm visually impaired (tunnel vision and need to zoom window). For me > 10 menu items means I can't see them all. 10 isn't uncommon btw.

[slidenerd]

A very long dropdown menu with a search box works perfect, i know others are gonna point towards custom libraries for this but that comes with a lot of bloat unfortunately