Luqman Marzuki

Luqman Marzuki writes about anything



Typeahead CSS Problem In Bootstrap Fix

Typeahead CSS Problem In Bootstrap Fix

The solution and CSS fix for web developers who are having trouble with the Typeahead dropdown CSS styling in Bootstrap CSS Framework.

I got this problem when using Bootstrap 3.0.3 and Typeahead 0.9.3. My dropdown button's doesn't looks too good:

Typeahead CSS Problem

Luckily I came across this good answer at Stackoverflow. You could follow his solution and do it manually. Or you could just copy this CSS code and place it over your site (or put it in a file).

.twitter-typeahead .tt-query,.twitter-typeahead .tt-hint{margin-bottom:0}
.tt-dropdown-menu{min-width:160px;margin-top:2px;padding:5px 0;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(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,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}
.tt-suggestion{display:block;padding:3px 20px}
.tt-suggestion.tt-is-under-cursor{color:#fff;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}
.tt-suggestion.tt-is-under-cursor a{color:#fff}
.tt-suggestion p{margin:0}
.twitter-typeahead .tt-hint{display:block;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;border:1px solid transparent;border-radius:4px}
.twitter-typeahead .hint-small{height:30px;padding:5px 10px;font-size:12px;border-radius:3px;line-height:1.5}
.twitter-typeahead .hint-large{height:45px;padding:10px 16px;font-size:18px;border-radius:6px;line-height:1.33}

Either way, good luck!