Bootstrap adjust dropdown-menu width

Question

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 -->

Have you tried adding your own CSS rule to make the dropdown field 100% width of the parent div? — Lee, Mar 01 '16 at 16:22

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

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.

edited May 23 '17 at 11:53

Community

1
1

answered Mar 01 '16 at 15:54

dasjanik

326
3
12

Yes. You are right. I actually want to let the dropdown-menu's width be equal to the element's, not the user's input. And it seems that selectize.js is what I want. Many thanks. – Ge Liu Mar 02 '16 at 01:19

silviagreen · Answer 2 · 2016-03-01T15:52:56.990

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 -->

Thanks but can't I automatically adjust the width to be equal to the input's width? Your solution is apparently fixed width and that's not what I want. — Ge Liu, Mar 01 '16 at 15:34
I have updated my solution with a jquery solution. Now the width changes according to the input width — silviagreen, Mar 01 '16 at 15:53

Bootstrap adjust dropdown-menu width

2 Answers2