Search code examples
javascripthtmltwitter-bootstraptwitter-bootstrap-3bootstrap-select

bootstrap-select drop-down get hidden by another drop-down

Why does some parts of the first drop-down menu get hidden by another drop-down menu below in the following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Note there is no responsive meta tag here -->

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>MarkerDB</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
  </head>


  <body>

    <div class="container">
      <form class="form-inline" action="/between/" method="get">
          <div class="input-group"> 
            <span class="input-group-addon">TestA</span>
              <select name="tests" class="selectpicker form-control" data-live-search="true" title="Plese select a test ...">

                    <option selected value="1">Test1</option>

                    <option selected value="2">Test2</option>

              </select>
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit">Search!</button>
              </span>
          </div>
      </form>

      <hr>

      <form class="form-horizontal" action="/compare/" method="get" role="form">
        <div class="input-group"> 
          <span class="input-group-addon">TestB:</span>
            <select name='cultnames' class="selectpicker show-menu-arrow form-control" multiple data-max-options="2" data-live-search="true">

                <option value="Test3">Test3</option>         
                <option value="Test4">Test4</option>

            </select>
            <span class="input-group-btn">
              <button class="btn btn-default" type="submit">Search!</button>
            </span>
          </div>
      </form>
      <hr>

    <HR>

    </div> <!-- /container -->


      <!-- Bootstrap core JavaScript
      ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>  
  </body>
</html>
Solution

  • If you put z-index:0 on the input-group in the 2nd form it works ok.

      ...
 <form class="form-horizontal" action="/compare/" method="get" role="form">
        <div class="input-group" style="z-index:0;"> 
  ...

    http://jsfiddle.net/kme2j8ma/