0

I am a bit confused as to how to properly deal with Bootstrap's drop-down menus in some contexts. In particular, it seems that menus have to be built this way:

<div class="btn-group">
  <button...>
  <ul class="dropdown-menu">
    <li...>
  </ul>
</div>

Now I would like to place this button within some container provided by some library, which happens to have unfortunate CSS.

See this example, due to the parent container z-index and position relative, the dropdown of the top button appears under the other button.

http://jsfiddle.net/p1dssmrh/

The dropdown-menu seems to inherit the relative context's features, which makes it not actually show up on top of many other elements of the page.

Is there either a way to locally address the issue by only changing things inside the btn-group div?

Or alternatively, is there a way to decouple the button from its dropdown-menu within the HTML, so that they don't get stuck in the same context?

(This problem is quite similar to Bootstrap dropdowns menus appearing behind other elements - IE7 but I am constrained by other libraries and not free to just change the enclosing HTML...)

Community
  • 1
  • 1
Ptival
  • 9,167
  • 36
  • 53
  • If you don’t mind overriding that unfortunate CSS, `.CodeMirror-gutter-wrapper { z-index: auto }` will fix it (see http://www.bootply.com/li9aEQZsBo) – Honore Doktorr May 07 '15 at 21:44
  • @HonoreDoktorr ah, it seems once again I simplified the example too much. While it fixes the issue in the fiddle, it does not in my actual code, let me come up with a better fiddle... – Ptival May 07 '15 at 21:52
  • @HonoreDoktorr Here is an updated fiddle with the actual issue I have: http://jsfiddle.net/p1dssmrh/ – Ptival May 07 '15 at 22:25
  • Set `z-index: 4` on `.Codemirror-sizer`, and make sure its absolutely-positioned children are `z-index: auto`, as here: http://jsfiddle.net/g0nm5gp5/ — the thing is, an auto z-index puts the *first* positioned element on top, while a numbered z-index put the *last* positioned element on top (thus covering your dropdowns). – Honore Doktorr May 07 '15 at 22:44
  • @HonoreDoktorr nice! do you want to post this as an answer? – Ptival May 08 '15 at 20:49
  • @HonoreDoktorr additionally, would you know how to make the dropdown menu not be hidden by the left editor in this fiddle? http://jsfiddle.net/g0nm5gp5/1/ – Ptival May 08 '15 at 22:12
  • Setting `.CodeMirror` and `.CodeMirror-scroll` to `overflow: visible` does it, but may introduce problems with long content unless you can find somewhere else to put `overflow: scroll`: http://jsfiddle.net/ybev1yoq/ – Honore Doktorr May 10 '15 at 21:10

1 Answers1

0

Set z-index: 4 on .CodeMirror-sizer, and make sure its absolutely-positioned children are z-index: auto. Sample.

The thing is, an auto z-index puts the first positioned element on top, while a numbered z-index put the last positioned element on top (thus covering your dropdowns).

Honore Doktorr
  • 1,585
  • 1
  • 13
  • 20