CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menu
Ge Liu
Ge Liu

Reputation: 392

Bootstrap adjust dropdown-menu width

I am using a dropdown-menu to show the candidate options I can choose. And I also want an input to filter the options, so when I enter something, the dropdown-menu should also be shown. So I want to adjust the width of the dropdown-menu to be equal to the input. And how can I show it when the I enter something in the input?

The html I current use is:

<div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div 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">
            <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="#">Separated link</a></li>
        </ul>
    </div><!-- /btn-group -->

enter image description here

Upvotes: 4

Views: 3790

Answers (2)

dasjanik
dasjanik

Reputation: 326

Actually you are searching for some kind of suggestion search box with given selectable choices if I understood correctly.

See this thread:twitter bootstrap autocomplete dropdown / combobox with Knockoutjs

Solution suggestions: selectize.js or Select2

The aspect of automatically adjusting the dropdown's width to be equal to the input's width is hard to achieve because it would cut off some of your given choices (example: Input is only one character - Dropdown would only show first character of every choice). This can't be what you want to achieve.

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

possible solution:

$('.dropdown-menu').width($('.input-group').width());
.input-group{
  width:33%;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div 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">
        <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="#">Separated link</a></li>
    </ul>
</div><!-- /btn-group -->

Upvotes: 0

Related Questions