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

z-index issue: typeahead dropdown-menu displays under navbar-fixed-top/bottom #4009

Closed
jamesbeck opened this issue Jul 6, 2012 · 5 comments
Labels
Milestone

Comments

@jamesbeck
Copy link

If you use a typeahead drop down menu within a fixed navbar, the dropdown menu is displayed under the navbar. The dropdown is given a z-index of 1000 whilst the fixed navbar is 1030.

@mdo
Copy link
Member

mdo commented Sep 4, 2012

Will need to talk to @fat to see if we can programmatically set this.

@demike
Copy link

demike commented Sep 5, 2012

All these issues are there because popovers, the typeahead menu and tooltips are appended to body.
If the dropdown menu is inserted after the the element (in this case the typeahead input element) it displays over the navbar, because it resides inside the navbar with z-index 1000.
Try it out: change bootstrap-typeahead.js line 36
from:
this.$menu = $(this.options.menu).appendTo('body')
to:
this.$menu = $(this.options.menu).insertAfter(this.$element)

In this case I think the menu should be overflow:visible

@mainerror
Copy link

@markdotto Technically speaking or if it would make sense?

@fat
Copy link
Member

fat commented Sep 25, 2012

this should be fixed in 2.1.2

@fat fat closed this as completed Sep 25, 2012
@cvrebert
Copy link
Collaborator

Duplicate of #1872.

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

No branches or pull requests

6 participants