Dropdowns overlapping buttons

[tkngdwn]

Whenever two select elements are in close proximity like above the dropdown menu falls behind the button for the lower element. I've tried to apply some z-index fixes, but alas, I'm not a z-index ninja.

Some things to note:
This is occuring with the latest version (1.6.2)
I haven't tested it without the select elements being a part of an input group. (Yet...)
I did have this problem with version 1.6.1 as well, but I threw position: static on the dropdown menus and it worked, although it broke the alignment for the dropdown causing it to fill the space under the input group addon as well.
The only css applied to the input groups and select elements (outside of colors and a position adjustment for the checkmark) comes from bootstrap and bootstrap-select. (Although I may have missed something, but I didn't see anything that was altering/applying z-indexes or positions.)

[t0xicCode]

Could you send us a jsfiddle or a page with the problem?

[hypercross]

I'm experiencing the same issue with 1.6.2 and bootstrap 3.2.0. I have two dropdown menus on the same form and the one above falls behind the lower one. I have no custom css on them.

Also, my search box seems to lose its bottom padding and the search box border touches the top of the first item on the list.

Rolling back to bootstrap 3.0.2 seems to fix all problems mentioned above.

[oakley808]

Just FYI, I ran into this same issue with Bootstrap 3.3.5 and bootstrap-select 1.7.3.

Here's an example of one of the DOM groups that seems to be showing through.

<div class="input-group watts-group">
    <span class="input-group-addon" id="watts-addon"><i class="fa fa-bolt"></i></span>
    <label for="watts">Wattage</label>
    <input id="watts" type="number" class="form-control" aria-describedby="watts-addon" value="">
</div>

Reverting to Bootstrap 3.0.2 resolved the issue.

[alexschomb]

I'm also experiencing this issue with the latest Bootstrap and bootstrap-select versions. I already tried a lot of z-index magic, but it doesn't seem to affect the behavior. Any help?

[caseyjhol]

See guidelines for contributing.

Bug reports

A bug is a demonstrable problem that is caused by the code in the repository.
Good bug reports are extremely helpful - thank you!

Guidelines for bug reports:

1. Use the GitHub issue search. Check if the issue has already been reported.
2. Check if the issue has been fixed. Try to reproduce it using the latest master or development branch in the repository.
3. Provide environment details. Provide your operating system, browser(s), jQuery version, Bootstrap version, and bootstrap-select version.
4. Create an isolated and reproducible test case. Create a reduced test case.
5. Include a live example. Make use of jsFiddle or jsBin to share your isolated test cases.