Typeahead problems with Bootstrap 3.0 RC1

update 14 feb 2014

As mentioned by laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/typeahead.js-bootstrap-css for additional CSS to use typeahead.js with Bootstrap 3.1.0.

Or use use the “old” (TB 2) plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26


Twitter’s typeahead doesn’t seem ready for Twitter’s Bootstrap 3.
To use Twitter’s typeahead with Twitter’s Bootstrap you will need some extra CSS (deprecated, no longer maintained).
Using this CSS doesn’t fix your problems.

In your example the input field don’t get a 100% width. This will be cause by the Javascript. The javascript wraps the input in a span:

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

This span don’t got a 100% so do input inside it. To fix add to your CSS:

.twitter-typeahead {
  width: 100%;
}

The Javascript sets the background-color of your input to transparent. If you don’t want to change the plugin source i will need some additional Javascript to fix this:

$('.tt-query').css('background-color','#fff');

Now is should work as expected based on your example. http://www.bootply.com/73439

update

The original question was for RC1 for Twitter’s Bootstrap 3.0.0. you also need to add:

.tt-dropdown-menu {
   width:100%;        
}

New bootply: http://bootply.com/86305

Leave a Comment