CODEWITHSUNDEEP
jquerycsstwitter-bootstraptypeahead
NSaid
NSaid

Reputation: 751

extending the width of bootstrap typeahead to match input field

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.

Upvotes: 34

Views: 36559

Answers (6)

Joe McLean
Joe McLean

Reputation: 194

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

Upvotes: 1

user41871
user41871

Reputation:

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

Upvotes: 75

candlejack
candlejack

Reputation: 1209

This is for newer versions:

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

Upvotes: 0

twoteesbrett
twoteesbrett

Reputation: 21

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

Upvotes: 2

Binary Logic
Binary Logic

Reputation: 1547

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.

Upvotes: 4

Bass Jobsen
Bass Jobsen

Reputation: 49044

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

Upvotes: 9

Related Questions