extending the width of bootstrap typeahead to match input field

Question

I know this question has been asked atleast three times before but the answer I saw were not what I was looking for. I am looking to increase the width of the autocomplete field that twitter bootstrap generates with its typeahead function. I have been reading that it stretches to cover all the text with in the field. that is to say that the longer the text, the wider the autocomplete field. However I would like it to be a span6 because that is how wide my search field is. Any ideas? I have seen some jquery answers but I couldn't follow them.

Solution 1

The dropdown menu is a ul with the classes typeahead dropdown-menu you could use CSS to set it's width:

.dropdown-menu
{
 width: .... px;
}

The width of the span6 is not static, so you will need some media queries to make it responsive.

For Bootstrap 3 the typeahead function is remove from TB3 instead use https://github.com/twitter/typeahead.js/. You will need some additional CSS to integrate it with Twitter's Bootstrap.You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap's theme. Try extended Bootstrap's LESS or if your are looking for a more a more extended version try: typeahead.js-bootstrap3.less.

The dropdown with is set with the .tt-dropdown-menu class now. In stead of changing the CSS you could also try to set the width dynamic. With typeahead a class of your typeahead input tag:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

Solution 2

To make the dropdown match the field width you'd want something like this:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Small improvement on the above using event.target and a global document listener.

Solution 3

I'm using Bootstrap 3.2.0 with typeahead.js-bootstrap3.less and nested the input in divs like this:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

I also needed to add this to my css:

.tt-input-group {
    width: 100%;
}

Solution 4

Here is a pure CSS solution:

Since .dropdown-menu is positioned absolute, adding position: relative; to the div wrapping around your uib-typeahead input field and setting width: 100%; to your .dropdown-menu will fix it.

Your CSS would look something like this:

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

View more solutions