twitter-bootstrap-modal
Demostrating issues #143 and #144 in bootstrap-select.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<div class="container">
<h3>Inputting proble</h3>
<!-- Button to trigger modal -->
<div>
<a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
<p>
Now you are able to enter text in the input field below. Once tested, open the modal.
</p>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal</h3>
</div>
<div class="modal-body">
<p>Now also you will able to enter text in the input</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<ul role="menu">
<li><a href="#">Link 1</a></li>
<li role="separator" class="divider"></li>
<li><input type="text" name="filter"></li>
<li style="height:200px;" class="scroll-container-y">
<ul class="list-unstyled gutter-left-small">
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
</ul>
<style>
CSS
.btn-group {
z-index: 1051;
}
ul[role="menu"]{
position: absolute;
left: 50px;
top: 400px;
z-index: 999999;
border: 1px solid black;
}