Search code examples
jquerycsstwitter-bootstrapselectz-index

Mutliple bootstrap-selects: z-index issue

I am using the bootstrap-select plugin for a couple of select. The problem is the dropdown list being displayed for the first select is behind the button that toggles the second select. Check it out (jsfiddle at the end):

enter image description here

This is the HTML:

<div class="input-group">
    <input id="min-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>
<div class="input-group">
    <input id="max-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>

And of course I am enabling the plugin:

$(function() {
  $('.select-time-unit').selectpicker();
})

The plugin generates a bootstrap dropdown menu. I have tried upping the z-index property for the li elements of the generated HTML, as well as downing the it for the button itself, but none of this worked.

Here is a jsfiddle where you can see for yourselves.

Solution

  • Affecting the children won't work, because the stacking order will only go as high as the parent element(s). You just need to set a higher z-index on the parent element of the first .input-group. https://jsfiddle.net/3oc6baoh/1/

    $(function() {
  $('.select-time-unit').selectpicker();
})
    .input-group.first {
  z-index: 1000;
}
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group first">
  <input id="min-value-input" type="text" class="form-control">
  <div class="input-group-btn">
    <select class="select-time-unit">
      <option value="m" selected>minutes</option>
      <option value="h">hours</option>
      <option value="d">days</option>
      <option value="w">weeks</option>
    </select>
  </div>
</div>
<div class="input-group">
  <input id="max-value-input" type="text" class="form-control">
  <div class="input-group-btn">
    <select class="select-time-unit">
      <option value="m" selected>minutes</option>
      <option value="h">hours</option>
      <option value="d">days</option>
      <option value="w">weeks</option>
    </select>
  </div>
</div>