0

You can see in this screenshot, the menu containing "hi" on each line is popping under body elements and also under a button on the screen.

popping under

The dom structure looks like so:

dom structure

The computed style of the dropdown element when open is:

background-color: transparent;
color: #999;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
position: relative;
width: 1425px;

Here is one of the items that pops "over" the dropdown menu's computed style:

box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
height: 22px;
line-height: 17px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: visible;
overflow-y: visible;
vertical-align: middle;
width: 74px;
word-spacing: 0px;

I can't seem to strike upon the right dom & css magic to make this work right. I've been playing the position in the dom heirarchy while inside the navbar of the dropdown div. I've also been playing with z-index on both the dropdown, the dropdown-menu and the elements that are popping over.

I feel a bit like there is something fundamental I'm not seeing here. Any thoughts?

amirpc
  • 1,638
  • 3
  • 19
  • 24

7 Answers7

6

I ran into a similar problem. I was able to fix it by removing the 'collapse' class from the nav-collapse element.

I didn't really look further into the problem but that fixed it for me.

Jeff
  • 61
  • 1
4

Figured it out, the problem was I had a transform3d on the navbar:

-webkit-transform: translate3d(0, 0, 0);

Removing this fixed it. I noticed that when I removed the translate3d that the computed style of the navbar would cause the z-index to go from 0 to auto.

Not sure if this is intended behavior?

Hope this helps someone else down the line.

amirpc
  • 1,638
  • 3
  • 19
  • 24
2

It's a z-index problem.

Make sure that the navbar is higher then the rest of the elements.

erik
  • 180
  • 2
  • 1
    +1 Yes, navbar has a z-index: 1000, so if your element is hidden by it, just use a z-index greater than 1000! https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L4065 – Caumons Aug 29 '13 at 18:42
2

I found my similar issue was due to opacity on a parent element being set to below 1.

Felix Böhme
  • 508
  • 5
  • 12
1

Add css to parent element

overflow:visible;
OldTrain
  • 1,880
  • 1
  • 25
  • 22
0

Using answers posted here I did the following....On my _Layout.cshtml I added

style="position: relative; z-index: 999;" to my container body-content div (just before RenderBody()) so it looks like this:

<div class="container body-content" style="position: relative; z-index: 999; ">
        @RenderBody()
dave317
  • 754
  • 2
  • 12
  • 30
0

True, as arnirpc proposed the

-webkit-transform: translate3d(0, 0, 0);

does this trouble. But I had to use this because of Bootstrap Dynamic Pills and Tabs also with dropdown. Seen here: Pills with dropdowns

So removing the translate would shift the dropdown box above the button of Dropdown - and thats what you do not want.

But the dropdown of Bootstrap 4 pills is defaultly not even working since the dropdown is hiding behind the TAB-Content and does not matter if its a H1, text or image.

So I tried the z-index thing on many things of the content the LI, UL, container etc. Nothing.

Soltion for me: in this case it was just putting a z-index-minus-1 (or any class with z-index: -1) on the inner content.

<div class="tab-content" id="pills-tabContent">
        <div class="tab-pane p-3 fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

            <div class="row">
                <div class="col-sm-4 z-index-minus-1"> <!-- HERE -->
David Salcer
  • 61
  • 5