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

Comments

@iron9light
Copy link

commented Feb 15, 2012

Add

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

We can make a nicer scroll bar too.

@led

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

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 Feb 17, 2012
@balexandre

This comment has been minimized.

Copy link

commented Oct 4, 2012

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

This comment has been minimized.

Copy link

commented Oct 4, 2012

go look up 'choosen'.

@sumityadav

This comment has been minimized.

Copy link

commented Oct 4, 2012

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

commented Apr 18, 2013

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Jan 6, 2017

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

This comment has been minimized.

Copy link

commented Jan 10, 2018

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
Projects
None yet
You can’t perform that action at this time.