CSS issue on Twitter Typeahead with Bootstrap 3
Solution 1
EDIT: Updated for Bootstrap 3.0 EDIT 2: Typeahead call was modified. See new jsfiddle
After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large
CSS
.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;
}
Script for input-small/input-large
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
Updated jsfiddle: http://jsfiddle.net/KrtB5/542/
Solution 2
Hmm it looks like .form-control
is a new class in Bootstrap 3 RC and it's a culprit of this issue (no doubt this is only RC version with many issues), you can just copy style of that class to .tt-hint
class. So:
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
Working fiddle: http://jsfiddle.net/KrtB5/2/
Update which works better with jQuery 1.9.1 and Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13
Solution 3
Check this out:
$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
Solution 4
There's also an unofficial port of the Bootstrap 2 typeahead plugin:
It doesn't require any additional CSS and it works with the latest version of Bootstrap.
Here's a demo on Plunker.
Solution 5
If you are using bootstrap.less, you have it much easier. BS 3 installs LESS 1.4.1 which now includes 'extend' goodness. see Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
Extend is killer feature for LESS now. You can now fully inherit (explicit named) classes. So no need to copy properties as in Hieu Nguyen's and Nick P's CSS answers. LESS will do it all with:
.twitter-typeahead .tt-hint:extend(.form-control all)
{}
The https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less code is broken for BS 3. I used it as a starting point, and also added making the dropdown not word wrap as per the BS 2 typeahead. My final less file is:
.tt-dropdown-menu
{
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
/* from BS dropdowns.less .dropdown-menu */
/* background-color: @dropdownBackground;*/
background-color: @dropdown-bg;
/*
border: 1px solid #ccc;
border: 1px solid @dropdownBorder;
border: 1px solid @dropdownBorder;*/
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
*border-right-width: 2px;
*border-bottom-width: 2px;
/*BS2 replaced with BS dropdowns.less .dropdown-menu*/
/*.border-radius(6px);*/
border-radius: 6px;
/*.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;*/
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
}
.tt-suggestion
{
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor
{
/*color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
.tt-suggestion.tt-is-under-cursor a
{
/*color: @dropdownBackground;*/
color: @dropdown-bg;
}
.tt-suggestion > p
{
margin: 0;
white-space: nowrap !important; //dont conform suggestion to parent input width
}
/*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/
.twitter-typeahead
{
display: block;
width: 100%; //BS 3 needs this to inherit this for children
}
.twitter-typeahead .tt-hint:extend(.form-control all)
{
color: @input-color-placeholder; //show hint distinct from input
}
Jaime Sangcap
Updated on July 08, 2022Comments
-
Jaime Sangcap almost 2 years
With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.jsIve integrated it successfully on remote fetching of data
but Im having problem with the autocompletion
as you can see there are two text appearing on the textbox.
I've included the css (https://github.com/jharding/typeahead.js-bootstrap.css) as said in the documentation but no luck.
any help or suggestion would be appreciated.
jsfiddle showing the issue:
http://jsfiddle.net/KrtB5/HTML
<body> <div class="container"> <label>State</label> <input type="text" class="typeahead form-control" /> </div> </body>
Javascript:
$('.typeahead').typeahead({ name: 'Some name', local: ['test', 'abc', 'def'] })