CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menu
Saurabh Harwande
Saurabh Harwande

Reputation: 171

Width for bootstrap dropdown

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

Answers (1)

ankita patel
ankita patel

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

Related Questions