Bootstrap: Z-Index issue on dropdowns

[devdelimited]

There seems to be an issue with overlapping elements and z-index on button dropdown (possibly other components). I've created a JS Fiddle to reproduce. https://jsfiddle.net/qu1ewxau/

Note that the bottom input group overlays the upper dropdown.

Hint: click the hamburger.

[twbs-lmvtfy]

Hi @devdelimited!

You appear to have posted a live example (https://fiddle.jshell.net/qu1ewxau/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 92, column 17 thru column 39: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
• line 122, column 17 thru column 39: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
• line 83, column 13 thru column 36: The for attribute of the label element must refer to a non-hidden form control.
• line 113, column 13 thru column 36: The for attribute of the label element must refer to a non-hidden form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[devdelimited]

I found a workaround. It would seem, if I remove the .btn-group parent completely, and rely solely on the .input-group (and change all the spans to divs to make the silly robots happy), the z-index is applied to the .btn instead of the .btn-group and life is good.

Updated example: https://jsfiddle.net/qu1ewxau/2/

[twbs-lmvtfy]

Hi @devdelimited!

You appear to have posted a live example (https://fiddle.jshell.net/qu1ewxau/2/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 83, column 15 thru column 40: The for attribute of the label element must refer to a non-hidden form control.
• line 111, column 15 thru column 40: The for attribute of the label element must refer to a non-hidden form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)