Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7

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



Leave a reply



Submit