1. дома
  2. Вопрос и ответ
  3. bootstrap-select перекрывается с другими выпадающими меню

bootstrap-select перекрывается с другими выпадающими меню

2014-10-11 2 views
2

Глядя на bootstrap-select examples, между различными раскрывающимися меню не происходит перекрытия. Однако в моих примерах все выпадающие меню перекрываются (Demo).bootstrap-select перекрывается с другими выпадающими меню

<!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=""> 

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

    <title>TEST</title> 


    <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"> 
    <link rel="stylesheet" href="/static/web.css"> 
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"> 

    </head> 


    <body> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="/search/">TEST</a> 
     </div> 
     <div class="navbar-collapse collapse" id="navbar-collapsible"> 
      <ul class="nav navbar-nav navbar-left"> 

      <li class="active"><a href="/search/">Home</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <form class="navbar-form navbar-right" method="get" action="/snearch/" role="form"> 
       <div class="form-group"> 
        <input class="form-control" type="text" name="sid" placeholder="e.g. hello"> 
        <button class="btn btn-default"><span class="glyphicon glyphicon-search" type="submit"></span> 
        </button> 
       </div> 
      </form> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 


    <div class="container"> 

     <form class="form-horizontal" action="/snps/" method="POST" role="form"> 
    <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1413008961.84##d5f5a444ea1ef9d7ed3268e2e554bde2d2cc21e3"></div> 
    <div class="input-group"> 

     <span class="input-group-addon">Test1:</span> 
     <select class="selectpicker form-control" data-live-search="true" id="test_select" name="test_name"> 
      <option value="">--- Select One ---</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
     </select> 
    </div> 
    <BR/> 
    <div class="input-group"> 
     <span class="input-group-addon">Test2:</span> 
     <select class="selectpicker form-control" data-live-search="true" id="test2_select" name="test2_name"> 
      <option value="">--- Select One ---</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
     </select> 
    </div>  
    <BR/> 
    <div class="input-group"> 
     <span class="input-group-addon">Test3:</span> 
     <select class="selectpicker form-control" data-live-search="true" id="test3_select" name="test3_name"> 
      <option value="">--- Select One ---</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
     </select> 
    </div>  
    <BR/> 
    <div class="input-group"> 
     <span class="input-group-addon">test4:</span> 
     <select class="selectpicker show-menu-arrow form-control" data-live-search="true" id="test4_select" multiple data-max-options="2" name="test4_names"> 
      <option value="">--- Select One ---</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 
      <option value="">Test</option> 

     </select> 
    </div>  
    <BR/>  
    <div class="input-group"> 
     <span class="input-group-addon">Start position:</span> 
     <input class="form-control" id="start_pos" name="start_pos" placeholder="e.g. 200" type="number" value=""> 
     <span class="input-group-addon">End position:</span> 
     <input class="form-control" id="end_pos" name="end_pos" placeholder="e.g. 1000" type="number" value=""> 
    </div> 
    <BR/>  

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

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

    <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>

Может быть, я мог бы использовать для всюду г-индекс, но в начальной загрузки, выберите examples они не используют его. Как можно избежать использования z-index ?

источник

2014-10-11 user977828

ответ

4

z-index:2 удалить из .input-group .form-control класса он будет работать нормально

JS Fiddle

источник

2014-10-11 07:31:05

+0

Спасибо, перекрывающая нет, но теперь в верхнем правом углу символ поиска изменилось. Как можно вернуть его? – user977828

+1

это не работает для меня – jackjop

Смежные вопросы

 Смежные вопросы