CSS issue on Twitter Typeahead with Bootstrap 3

Question

With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.js

Ive integrated it successfully on remote fe

Answer 1

No need to go thru any of these complicated implementations, just add

style="position: relative"

To the parent element. It’s using absolute positioning, it just needs to know what “absolute” you’re referring to.

Answer 2

The solution that I came up with, was to simply add another CSS class (from-group-lg) to my form-group element.

My HTML:

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

In my scss file I added:

.form-group-lg .tt-hint
{
    @extend .input-lg;
}

Answer 3

Another approach to make Twitter Typeahead to work with Bootstrap 3.

// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.twitter-typeahead, .typeahead').attr('style',''); 

Then, in your LESS stylesheet, you can add the following:

// Twitter Typeahead

.twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}

Answer 4

This worked for me. You may need to play with top and left numbers to get it right.

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');

Answer 5

Check this out:

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');

Answer 6

Not only .tt-hint is brocken, but other css-classes too.

The best solution, working in all browsers, is to add the additional css, which repairs the css problems between Typeahead.js and Bootstrap 3:

https://github.com/jharding/typeahead.js-bootstrap.css