Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support very long dropdown menu #1989

Closed
iron9light opened this issue Feb 15, 2012 · 10 comments
Closed

support very long dropdown menu #1989

iron9light opened this issue Feb 15, 2012 · 10 comments

Comments

@iron9light
Copy link

Add

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

We can make a nicer scroll bar too.

@led
Copy link

led commented Feb 15, 2012

Would amend this to accommodate any egregiously long menu entries.

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

@mdo
Copy link
Member

mdo commented Feb 17, 2012

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.

@mdo mdo closed this as completed Feb 17, 2012
@balexandre
Copy link

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
Copy link

thezoggy commented Oct 4, 2012

go look up 'choosen'.

@sumityadav
Copy link

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

Thanks,
Sumit

On Thu, Oct 4, 2012 at 3:14 PM, thezoggy notifications@github.com wrote:

go look up 'choosen'.


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

@iatek
Copy link
Contributor

iatek commented Apr 8, 2013

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

@bryan610
Copy link

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
Copy link

ugate commented Jun 28, 2013

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

12 participants