Typeahead.js interferes with Bootstrap input groups

Question

How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that\'s part of an input group, the jo

Answer 1

This project partially solved the issue for me: https://github.com/hyspace/typeahead.js-bootstrap3.less

The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.

Answer 2

Bootstrap v4 solution:

.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}

Answer 3

This fixes the problem when the left-hand side of the text box is square (not rounded):

.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) {
  border-radius: 4px 0px 0px 4px;
}

Answer 4

.twitter-typeahead{ float:left; width:100%}

Answer 5

maybe?

.twitter-typeahead > .form-control{
  width: inherit !important;
}