CSS issue on Twitter Typeahead with Bootstrap 3

css, jquery, twitter-bootstrap-3, typeahead.js

Solution

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/

Problem

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'] }) ```

Original source

Related problems