Bootstrap dropdowns menus appearing behind other elements - IE7
Its a stacking context issue!
Even though you are using z-index
on the dropdown, it is only relative to elements in the same stacking context. You need to add a z-index
and a position
to a parent element in order to get this to work. In this case I would recommend the header-top
div
Bootstrap dropdowns menus appearing behind other DIV's
As mentioned, remove overflow:hidden
from .top-box
to stop clipping the content and add the class clearfix
to clear the floats of the inner divs.
<div class="top-box animatedq fadeInDownq clearfix">
Bootstrap dropdown menu hidden behind other elements
You have two options. You can make the container's overflow expand to fit the content by setting 'overflow: auto' to the parent's css.
FIDDLE DEMO
.panel-body { /* parent container of the menu */
overflow:auto;
}
Or you could do something functionally with JavaScript to handle the menu placement. This option is a little bit 'hacky' and would require further improvements. You would need to improve it to handle multiple menus open at once on the same page, and you would need to improve how it selects the menu. You might also want to add scroll support to move the menu with its target element unless that's not an issue. Here's the fiddle:
FIDDLE DEMO
(function() {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function(e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
There is probably a better way to do this, but the concept is to move the menu from the confines of the parent element to the body. When you're relying on the html data-attributes to setup the menu, you'll have trouble doing this, but that is where the second solution I reference becomes useful.
Sadly I would have suggested looking into the 'Via Javascript' options that bootstrap provides, but apparently they don't have the option to set the target append element. It would have been nice to have an option to append the menu on to whichever element you want like most of their other items: Bootstrap Docs
EDIT
As @Andrea Pizzirani mentioned, you could try removing the css for the menu absolute positioning, but I wouldn't recommend it! That will mess up all other instances of the menu unless you add other css to restrict scope of the change. Also, if you want the menu positioned under the button, you'll have to redo CSS that bootstrap already had in place.
Still, if it works, and you're not worried about messing up all other menus, it may be the solution you were looking for. Heres a fiddle demonstrating the solution:
FIDDLE DEMO
dropdown-menu {}
EDIT
I finally found where I originally found this solution. Gotta give credit where credit is due!
CSS Dropdown menu hidden behind content IE7
The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.
You have the li
inside #nav
with a position:relative
, an apparently IE interprets this as a new stacking context.
Try this:
#nav li {
display: block;
position: relative;
z-index: 1; // force IE to recognize stack at this point
}
Bootstrap navbar dropdown hidden behind grid content
You have to set a position on .headercontainer
for z-index
to work. Just add these rules to the class.
position: relative;
z-index: 1;
Navigation Menu Dropdowns Stuck Behind Other Elements
In your css, set your z-index
to a really big number like 9005
, so it's above everything else on the page.
Like: z-index: 9005;
Internet Explorer 7 menu dropdown under other elements problem
Problem fixed using this workaround: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Bootstrap navbar dropdown hidden behind bootstrap slider
remove the overflow:hidden from your nav-bar class. I hope this will help you.
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
}
Related Topics
Css: Margin-Top When Parent'S Got No Border
Css Background-Size: Cover + Background-Attachment: Fixed Clipping Background Images
Ie8 Display Inline-Block Not Working
What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T
Downloading a Google Font and Setting Up an Offline Site That Uses It
Styling Google Maps Infowindow
How to Rotate the Background Image in the Container
Remove Gutter Space For a Specific Div Only
How to Remove the Outline Around Hyperlinks Images
Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed
Sass: Randomly Pick Background-Image from a List
Applying CSS Styles Only to Certain Elements
Prevent Flex Item from Exceeding Parent Height and Make Scroll Bar Work
How Can One Import Only Variables and Mixins from SASS Stylesheets
Remove Extra Button Spacing/Padding in Firefox
How to Keep Wrapped Flex-Items the Same Width as the Elements on the Previous Row