Typeahead.js v0.10.1 and Bootstrap 3

Question

I just updated to the latest version of typeahead.js to gain access to some new features. It is not compatible with Bootstrap 3 . With the previous version (pre Bloodhound.js), I had to add custom CSS, which I found on the forums that made it compatible. This CSS does not work with the latest update.

Does anyone know where I can get CSS for bootstrap 3 / typeahead.js v0.10.1?

jsfiddle here

<Satisfy-StackOverflow-Code-Requirement-For-Links-to-jsfiddle> 

Answer 1

Well, I managed to get it to work with the following css

 .twitter-typeahead { width: 100%; position: relative; } .tt-dropdown-menu { width: 100%; min-width: 160px; margin-top: 2px; padding: 5px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .twitter-typeahead .tt-suggestion.tt-cursor { color: #fff; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .tt-suggestion.tt-cursor a { color: #fff; } .tt-suggestion p { margin: 0; } 

UPDATE for typeahead.js v0.11.1

 /********************************************************** * typeahead.js v0.11.1 - twitter bootstrap v3.3.5 * **********************************************************/ /*root typeahead class*/ .twitter-typeahead { display: inherit !important; width: 100%; } .twitter-typeahead .tt-input[disabled] { background-color : #eeeeee !important; } /*Added to input that initialized into a typeahead*/ .twitter-typeahead .tt-input { } /*Added to hint input.*/ .twitter-typeahead .hint { } /*Added to menu element*/ .twitter-typeahead .tt-menu { width: 100%; max-height: 500px; overflow-y: scroll; border: 1px solid #cccccc; -moz-box-shadow: 12px 14px 30px -7px #616161; -webkit-box-shadow: 12px 14px 30px -7px #616161; box-shadow: 12px 14px 30px -7px #616161; } /*Added to dataset elements*/ .twitter-typeahead .tt-dataset { } /*dded to suggestion elements*/ .twitter-typeahead .tt-suggestion { padding: 3px 20px; white-space: nowrap; } /*Added to menu element when it contains no content*/ .twitter-typeahead .tt-empty { background-color: white; } /*Added to menu element when it is opened*/ .twitter-typeahead .tt-open { background-color: white; } /*Added to suggestion element when menu cursor moves to said suggestion*/ .twitter-typeahead .tt-suggestion:hover, .twitter-typeahead .tt-suggestion:focus, .twitter-typeahead .tt-cursor { cursor: hand !important; background-color: #337ab7; color: white; } /*Added to the element that wraps highlighted text*/ .twitter-typeahead .tt-highlight { } 

Answer 2

Here's the scss version:

 @mixin typeahead-active() { // mimics @extend .dropdown-menu > .active > a; color: $dropdown-link-active-color; text-decoration: none; outline: 0; background-color: $dropdown-link-active-bg; } //https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names span.twitter-typeahead { // this is the suggested matches dropdown .tt-menu { @extend .dropdown-menu; } .tt-hint { color: #999 } // Added to suggestion elements. .tt-suggestion { // mimic .dropdown-menu > li > a padding: 3px 20px; line-height: $line-height-base; // Added to suggestion element when menu cursor moves to said suggestion. &.tt-cursor { @include typeahead-active; } // Hover/focus on suggestion &:hover, &:focus { @include typeahead-active; } p { margin: 0; } } .input-group & { display: block !important; .tt-dropdown-menu { top: 32px !important; } } .input-group.input-group-lg & { .tt-dropdown-menu { top: 44px !important; } } .input-group.input-group-sm & { .tt-dropdown-menu { top: 28px !important; } } } 

Answer 3

The update offered by @jax is the best solution I find after a few hours.

I need to make some changes to the original CSS in order to work correctly with BS 3.3.6. Here he is:

 /********************************************************** * typeahead.js v0.11.1 - twitter bootstrap v3.3.6 * **********************************************************/ /*root typeahead class*/ span.twitter-typeahead { width: 100%; } .input-group span.twitter-typeahead { display: block !important; } .twitter-typeahead .tt-input[disabled] { background-color : #eeeeee !important; } /*Added to input that initialized into a typeahead*/ .twitter-typeahead .tt-input { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; -webkit-border-top-left-radius: 4px !important; -webkit-border-bottom-left-radius: 4px !important; } /*Added to hint input.*/ .twitter-typeahead .hint { } /*Added to menu element*/ .twitter-typeahead .tt-menu { width: 100%; max-height: 500px; overflow-y: scroll; border: 1px solid #cccccc; border-radius: 4px; -moz-box-shadow: 12px 14px 30px -7px #616161; -webkit-box-shadow: 12px 14px 30px -7px #616161; box-shadow: 12px 14px 30px -7px #616161; } @media (min-width: 768px) { .twitter-typeahead .tt-menu { width: 200%; } } .input-group .twitter-typeahead .tt-menu { margin-top: 32px; } .input-group.input-group-lg .twitter-typeahead .tt-menu { margin-top: 44px; } .input-group.input-group-sm .twitter-typeahead .tt-menu { margin-top: 28px; } /*Added to dataset elements*/ .twitter-typeahead .tt-dataset { } /*Added to suggestion elements*/ .twitter-typeahead .tt-suggestion { padding: 3px 5px; white-space: nowrap; } /*Added to menu element when it contains no content*/ .twitter-typeahead .tt-empty { background-color: white; } /*Added to menu element when it is opened*/ .twitter-typeahead .tt-open { background-color: white; } /*Added to suggestion element when menu cursor moves to said suggestion*/ .twitter-typeahead .tt-suggestion:hover, .twitter-typeahead .tt-suggestion:focus, .twitter-typeahead .tt-cursor { background-color: #337ab7; color: white; } /*Added to the element that wraps highlighted text*/ .twitter-typeahead .tt-highlight { }