CSS issue on Twitter Typeahead with Bootstrap 3

Question

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

enter image description here

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

Do you have any CSS for the input other than Bootstrap one? Could you try to create a jsfiddle? — Hieu Nguyen, Aug 05 '13 at 13:25
just the bootstrap 3. the problem seems to be the typehead.js is adding an extra input textbox which overlaps on the actual search query textbox. — Jaime Sangcap, Aug 05 '13 at 13:37
I can't reproduce this. Could you post your HTML and where you initialize typeahead? My fiddle: http://jsfiddle.net/md6bx/ — Hieu Nguyen, Aug 05 '13 at 14:26
I dont use fiddle. And Im trying to edit my post to include the Html but I am having problem with the format because I am using Razor View ASP MVC. — Jaime Sangcap, Aug 05 '13 at 14:37
best tutorial and demo of typeahead with twitter bootstrap 3 http://wsnippets.com/responsive-facebook-style-navigation-bar-people-search-using-ajax-php-mysql-twitter-bootstrap-3/ — user2943773, Jan 30 '14 at 06:54

Nick P · Accepted Answer · 2015-11-12T19:33:49.270

59

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/

edited Nov 12 '15 at 19:33

answered Aug 05 '13 at 17:46

Nick P

758
7
13

23

It works fine for me in FF22, but thanks for the constructive feedback and downvote... – Nick P Aug 06 '13 at 14:06
1

The hint .tt-hint class needs to have the same properties as your field, to get the right position. – Washington Botelho Nov 18 '13 at 01:52
2

Excellent. I had to add styles to support the standard form with label above input field. `.twitter-typeahead {display: block !important;}` and then for inline form `.form-inline .twitter-typeahead {display: inline-block !important;}` – Corie Slate Nov 27 '13 at 21:31
I had to also add the following (colors are largely cosmetic, but help to match example from the typeahead.js page) .tt-dropdown-menu { background: #fff; border: solid 1px gainsboro; margin-top: 10px; width: 100%; } .tt-dropdown-menu > div { padding-left: 10px; padding-right: 10px; } .tt-query { color: #000; } .twitter-typeahead .header { border-bottom: solid 3px gainsboro; color: #3875ab; font-weight: bold; margin: 10px auto; text-transform: uppercase; } .twitter-typeahead .required { background: #FEFFF0 !important; } – wloescher Feb 04 '14 at 16:38
The example doesn't work at my Chrome 34. Is't only me? – newbie Apr 21 '14 at 05:35
newbie, check the updated jsfiddle. Typeahead made a breaking change to the call. – Nick P Apr 21 '14 at 20:38
1

I made some changes to the fiddle to get the overlap working, and the cursor selection correct: http://jsfiddle.net/KrtB5/541/ – Alan Files Nov 12 '15 at 14:45
@AlanFiles Thanks for the update. I updated the jsfiddle. – Nick P Nov 12 '15 at 19:34

score 16 · Answer 2 · edited Oct 19 '13 at 17:36

16

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

edited Oct 19 '13 at 17:36

Per Lundberg

3,837
1
36
46

answered Aug 05 '13 at 19:09

Hieu Nguyen

8,563
2
36
43

i guess that would work. i just have to add some css for .input-xxx, small, large, medium. – Jaime Sangcap Aug 06 '13 at 02:41
the problem here is the js plugin which set the background-color of your input to transparent. To fix set it back to white. See: http://jsfiddle.net/bassjobsen/KrtB5/7/. Also see: http://stackoverflow.com/questions/18167246/typeahead-problems-with-bootstrap-3-0-rc1/18171568. Note the solution here depends on fixed sizes and height like `line-height: 1.428571429;` which make it less useful – Bass Jobsen Aug 11 '13 at 11:57
1

get some updates by using jquery 1.9.1, BS 3.0.0 and change the padding of .tt-hint, this should be working: http://jsfiddle.net/KrtB5/13/ – Shawn Aug 22 '13 at 00:47
Doesn't look well with the BS 3.0.0 release. – Per Lundberg Oct 02 '13 at 20:09
1

@Shawn: Your JSFiddle is one of the better solutions I've seen. But the font color of the "remaining characters" of the word being typed is still not right, compared to e.g. http://twitter.github.io/typeahead.js/examples/. Any idea of how it could get fixed? – Per Lundberg Oct 17 '13 at 20:26
try with the color for .tt-hint – Shawn Oct 21 '13 at 08:50
I've changed the height to "height: 34px;" and it works great now. Thanks. – Hass Oct 23 '13 at 06:22

score 14 · Answer 3 · edited Sep 17 '13 at 09:47

14

Check this out:

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');

edited Sep 17 '13 at 09:47

NeverHopeless

11,077
4
35
56

answered Sep 17 '13 at 09:27

Andreas

393
3
7

score 7 · Answer 4 · answered Jan 21 '14 at 21:17

7

There's also an unofficial port of the Bootstrap 2 typeahead plugin:

Bootstrap 3 Typeahead

It doesn't require any additional CSS and it works with the latest version of Bootstrap.

Here's a demo on Plunker.

answered Jan 21 '14 at 21:17

Paolo Moretti

54,162
23
101
92

this works pretty well. maybe it's not the best option, but it suts my needs. in addition to that I have set the following styles so that the dropdown is as long as the input field: `.dropdown-menu { display: block; position: static; width: 100%; }` I thought it might help somebody – bboydflo Mar 05 '14 at 12:46

score 4 · Answer 5 · edited May 23 '17 at 12:06

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
}

do you have the .css file? i dont know how to compile less – Jaime Sangcap Nov 04 '13 at 06:27 — Jaime Sangcap, Nov 04 '13 at 06:27
For CSS use Nick P's answer. – RockResolve Nov 06 '13 at 10:57 — RockResolve, Nov 06 '13 at 10:57

score 3 · Answer 6 · answered Oct 09 '13 at 08:10

3

Not only .tt-hint is brocken, but other css-classes too.

The best solution, working in all browsers, is to add the additional css, which repairs the css problems between Typeahead.js and Bootstrap 3:

https://github.com/jharding/typeahead.js-bootstrap.css

answered Oct 09 '13 at 08:10

optimister

101
1
1

Not maintained anymore (and deprecated) – user Aug 03 '14 at 06:51

user · Answer 7 · 2014-11-02T05:06:29.893

A comprehensive solution (recommended in this bug report at Typeahead)

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.twitter-typeahead {
  width: 100%;
}
.input-group .twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.twitter-typeahead .tt-hint {
  color: #999999;
}
.twitter-typeahead .tt-input {
  z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}

score 1 · Answer 8 · answered Sep 28 '13 at 18:12

1

This worked for me. You may need to play with top and left numbers to get it right.

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');

answered Sep 28 '13 at 18:12

Pramod Shivale

71
3

score 1 · Answer 9 · answered Nov 07 '13 at 22:29

1

Based in Andreas's answer I'd bet for the following using less:

.tt-hint { 
   .form-control;
}

answered Nov 07 '13 at 22:29

Gonzalo Muro

196
1
7

1

This worked for me with sass/scss: `.tt-hint { @extend .form-control; }` – Paul Oliver Dec 30 '13 at 13:48

score 0 · Answer 10 · answered Dec 05 '13 at 09:41

The solution that I came up with, was to simply add another CSS class (from-group-lg) to my form-group element.

My HTML:

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

In my scss file I added:

.form-group-lg .tt-hint
{
    @extend .input-lg;
}

score 0 · Answer 11 · edited May 23 '17 at 12:06

From Typeahead problems with Bootstrap 3.0 RC1: As mentioned by [laurent-wartel][2] try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/Bootstrap-3-Typeahead for additional CSS to use typeahead.js with Bootstrap 3.1.0.

Or use use the "old" (TB 2) plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

score 0 · Answer 12 · answered Jun 19 '14 at 14:41

A cleaner Less solution

.tt-small {

    .twitter-typeahead {

        display: block !important; // Note: Override inline styles set by JavaScript

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Where the markup looks something like:

<div class="form-group">
    <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
    <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
        <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
    </div> <!-- tt-small end -->
</div>

score 0 · Answer 13 · answered Jul 04 '14 at 17:19

Another approach to make Twitter Typeahead to work with Bootstrap 3.

// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.twitter-typeahead, .typeahead').attr('style','');

Then, in your LESS stylesheet, you can add the following:

// Twitter Typeahead

.twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}

score 0 · Answer 14 · answered Sep 04 '14 at 16:11

0

No need to go thru any of these complicated implementations, just add

style="position: relative"

To the parent element. It’s using absolute positioning, it just needs to know what “absolute” you’re referring to.

answered Sep 04 '14 at 16:11

Kirk Strobeck

17,984
20
75
114

CSS issue on Twitter Typeahead with Bootstrap 3

14 Answers14

Linked