I have a problem with several bootstrap-select which display the list of values behind other input text of the same form.
You can see several similar examples of the same failure
Any help on how to fix it?
It's indeed a problem reported repeatedly in Bootstrap when using multiple groups of select-picker in the same container, the lists are one position below the input .
The first thing we could try is to use the property z-index in our favor, increasing its value in the drop-down lists, or decrease it (or eliminate it) in the text that is being superimposed, but it would not be the right use .
The solution that is offered is as follows:
.input-group .bootstrap-select.form-control {
z-index: inherit;
}
For frozen properties, the
inheritvalue reinforces the behavior of the default value and is necessary only to void other rules.
.input-group .bootstrap-select.form-control {
z-index: inherit;
} <!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> You can remove the class form-control from the 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" 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" 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" 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>