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.

Bohannan

Answer 1

Michael Watson gave what I think is the simplest answer in his comment.

.twitter-typeahead { width: 100%; } 

Update #1: Based on the comments below (thanks Steve, Vishi), do the same for .tt-hint, .tt-input, .tt-dropdown-menu.

Update #2: mlissner reports that .tt-dropdown-menu is now .tt-menu, so the end result is

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Wretch

I had to do the same for .tt-hint as well, but this worked for me. – Gaslight

I had to make the width of a few more classes 100%.This worked for me .twitter-typeahead, .tt-hint, .tt-input, .tt-dropdown-menu { width: 100%; } – Dolly

I believe .tt-dropdown-menu is now .tt.-menu, so the new thing is: .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }. What a mess this is. – Gosh

Need to use !important to override other styles in my case (I am using Semantic UI) – Bennir

Answer 2

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');});

Evan

Thanks. Use $('#yourinput').outerWidth() though to match the input real width – Oxidation

this solution with .twitter-typeahead{ width: 100%; } worked for me – Gredel

@MichaelLWatson +1 for the simple and straight forward solution. – Amphistylar

Answer 3

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.

Heartburn

Answer 4

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%;
}

Aloysia

Answer 5

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%;
}

Weiss

Thank you works fine, except that the long text being suggested is displayed outside the dropdown. – Angelo

@AhmedAlAbdulaal If your text needs to be trimmed, add this class to it .overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } – Weiss

Answer 6

This is for newer versions:

.twitter-typeahead, .tt-menu 
{
  display: block !important;
}

Lynda

this seems to disable the suggestion dropdown disappearing after picking the element – Uniparous

👏This works like a charm in BS4 & TypeAhead 0.11.1 My code is slightly different though: .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; display: block} Just had to remove !important – Latrell