0

I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.

enter image description here

container item position: relative; z-index: 1; dropdown-menu position: absolute; z-index: 10000;

I also did test btn-group with a higher z-index and it did not work.

Here is a working fiddle http://jsfiddle.net/sGem8/

tarokins
  • 156
  • 2
  • 9
  • Can you create a fiddle for it. We can't say anything by just looking at the image.. – Vishal Khode Apr 17 '14 at 06:21
  • Will do. Will post it in a moment. Thanks for the reply. – tarokins Apr 17 '14 at 06:28
  • Hi @VishalKhode, here is the working fiddle. http://jsfiddle.net/sGem8/ – tarokins Apr 17 '14 at 06:43
  • Now I know why this didn't work. Tried taking out the z-index property but still. This div is contained by jQueryUI draggable property and forces the div to get a z-index of 0. I don't want to hack it. It may destroy some properties linked to it. I just repositioned the button somewhere else. So much for this headache. Thanks again! – tarokins Apr 17 '14 at 07:39
  • http://stackoverflow.com/a/28212815/1166597 – OldTrain Jan 29 '15 at 10:53

3 Answers3

2

You don't need to add z-index property.. Simply remove it and it will work..
i.e.

#container > li {
  display: block;
  border-radius: 3px;
  position: relative;
  padding: 15px;
  background: #ecf0f1;
  margin-bottom: 15px;
}

Working Fiddle

Vishal Khode
  • 831
  • 2
  • 9
  • 15
2

I have faced the same issue. Inside the main container which had all the nav-items, I had every outermost div items as position: relative Only the dropdown menu had position: absolute

To make the dropdown appear above all items, add 

.dropdown{
position: absolute;
z-index : 999; //some high value
}

and other items in the container have

.outer-divs{
position: relative;  
z-index: 1; //some low value
}

If you still find your dropdown to behave not as expected, try setting the div item that opens the dropdown when clicked to

.dropdown-container{
position  :static;
}

Most people will find the last trick to be the most valuable. Hope this helps.

TNT
  • 480
  • 1
  • 4
  • 11
  • The last item did it for me after trying everything else for hours. Should this be its own answer? – Ddddan Feb 17 '23 at 21:35
1

Modify the below css in your styles

#container > li {
 display: block;
 border-radius: 3px;
 position: relative;
 /* z-index: 0; */
 padding: 15px;
 background: #ecf0f1;
 margin-bottom: 15px;
}
Sai Babu
  • 51
  • 7