CODEWITHSUNDEEP
htmlcsslayouttwitter-bootstrap
amirpc
amirpc

Reputation: 1668

twitter bootstrap dropdown popping under elements

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?

Upvotes: 0

Views: 12299

Answers (7)

David Salcer
David Salcer

Reputation: 61

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 -->

Upvotes: 0

dave317
dave317

Reputation: 774

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()

Upvotes: 0

OldTrain
OldTrain

Reputation: 1890

Add css to parent element

overflow:visible;

Upvotes: 1

Felix B&#246;hme
Felix B&#246;hme

Reputation: 518

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

Upvotes: 2

Jeff
Jeff

Reputation: 61

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.

Upvotes: 6

amirpc
amirpc

Reputation: 1668

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.

Upvotes: 4

erik
erik

Reputation: 180

It's a z-index problem.

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

Upvotes: 2

Related Questions