search

soundasleep / jquery-dropdown

Bootstrap-style dropdowns with some added features and no dependencies.
Other
767 stars 268 forks source link

Dropdown overlaps with modal dialog (bootbox) #73

Closed bartvanderwal closed 9 years ago

bartvanderwal commented 9 years ago

My fork now works better along with Bootstrap thanks to some simple renaming. But I still bumped into an issue with overlapping content with Bootstrap's Bootbox plugin due to a very high z-index used in this projects CSS (line 3): See below screenshot.

I expect the dropdown panel to be below the modal dialog, and also behind it's mask.

Disabling the z-index fixed this issue. However it caused some other issues later. Is there a structured way of handling z-index-es dynamically or something, instead of just setting it REALLY high? :smile: 

.dropdown {
   position: absolute;
   /* z-index: 9999999; */
   display: none;
}

jquerydropdownzindexbugwithbootboxmodal

claviska commented 9 years ago

I really hate using high z-indexes—not sure why I ever left that in there. It can safely be reduced (and overridden in the rare case it's necessary).

For reference, here's what bootstrap uses by default: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L256

bartvanderwal commented 9 years ago

Thanks @claviska! That was a good reference.

For my use case, where I have

a z-index of 1039 worked. I checked that in into my fork. I could do a pull request, but I'll wait until you accept/reject/followup on my previous one :).

zindex

bartvanderwal commented 9 years ago

PS As illustrated the fix works. However in my choice for a z-index I was uninhibted by any knowledge about stacking contexts, which appear to also apply/exist when talking about z-indexes :smile:. I'm reading up on it now though: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

claviska commented 9 years ago

Fixed in 2.0.0.