Reputation: 171
I am trying to make a search control with a dropdown using bootstrap css. I tried giving width of 100% to the menu but it just adds scrollbar to it. Is there any way to make the width of menu equal to the text box. I cannot use static width because the page will be responsive and will be viewed using different devices.
Link to fiddle: https://jsfiddle.net/ff0j7wjh/
HTML:
<div class=" col-lg-12">
<div class="input-group">
<input id="searchBox" type="text" class="form-control" aria-label="...">
<div id="searchDrop" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
.
.
.
</ul>
</div>
</div>
</div>
JS:
$("#searchBox").click(function(e) {
$("#searchDrop").toggleClass("open");
e.stopPropagation();
});
Upvotes: 0
Views: 789
Reputation: 4251
Please try this.
.custom-drop .input-group-btn{
position:static;
}
.custom-drop ul {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" col-lg-12 custom-drop">
<div class="input-group">
<input id="searchBox" type="text" class="form-control" aria-label="...">
<div id="searchDrop" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
</ul>
</div><!-- /btn-group -->
</div>
</div>
Upvotes: 2