CSS issue on Twitter Typeahead with Bootstrap 3
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 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']
})
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');