Bootstrap 3 broken style

[Stajor]

Changed css in bootstrap 3
Before: http://d.pr/i/44ma
After: http://d.pr/i/dv1W

[jharding]

I haven't had a chance to take a look at Bootstrap 3 yet. It's on my TODO list.

[ericsaupe]

I came to post this as well. I'm glad to see it's been recognized. Here is a jsFiddle with the current typeahead.js and Bootstrap 3 that illustrates some of the basic CSS problems like the hint being offset and the input not spanning 100% once typeahead is applied.

Hope that helps when you get to it!

Edit: Fixed link.

[bhays]

I put together a new set of styles that allow for Bootstrap 3 and Typeahead to play nicely. You can see them at https://gist.github.com/bhays/6140058

The width of the input field is still an issue. This is due to the inline-block style that gets applied to the twitter-typeahead element. It's possible to override the .twitter-typeahead display style with !important if needed.

[jharding]

Thanks for doing that @bhays.

[apexskier]

+1 @bhays

Unfortunately, this still doesn't work great when using things like input group, as I'm doing.

[apexskier]

If anyone's interested, here's @bhays css modified to work with one very specific example: a large btn group.

http://jsfiddle.net/y3mZn/4/

edit: updated link

[kuroe]

The CSS by @apexskier unfortunately breaks if the textfield is not the first element in the input-group. It also does not work if compiled version of Bootstrap is used (need to use !important). Here is one that makes it works even when the textfield is not the first within input-group and I also threw in so that the border-radius is the right size even if .input-small is used.

http://jsfiddle.net/qrtua/1/

[tom-dudman]

The fix by @kuroe appears leaves the hint as large if default size or.input-sm. I'd be so grateful for a fix (it's beyond my skill)

See: http://jsfiddle.net/qrtua/2/

[kuroe]

@the-duddo I have no time to cook up a fix but from what I know it have to resort to jQuery to accommodate the change of different input size. What I did for my own website is that I tweaked the jQuery and let it add the class of .input-small/input-whatever to the text field .tt-hint IF there is the same class in the previous/following element.

[ashleydw]

This works for me http://jsfiddle.net/needathinkle/MA7Ep/

[Marcpepe]

Thx @ashleydw, that worked great for me!

[nivesh2]

Thx @ashleydw, works for me too!

[ErikSchierboom]

@ashleydw It also works for me! Thanks a lot.

[kand]

@ashleydw looks great! thanks!

[ArlingtonHouse]

How are you guys implementing this fix? Just overwriting all the css with @ashleydw css?

[kand]

No, I just put it in my own CSS file. Didn't modify any bootstrap css or anything.

[ericsaupe]

@ArlingtonHouse We are just putting it in our CSS file that is inherited site wide. We aren't touching either typeahead.js or Bootstrap's files.

[ashleydw]

I forked the original css repo and submitted a pull request https://github.com/ashleydw/typeahead.js-bootstrap.css.

Example page here: https://rawgithub.com/ashleydw/typeahead.js-bootstrap.css/master/index.html

Hope it helps. I removed the less file as I'm not good at it. If anyone can contribute one, that'd be great.

[ocodia]

This works great in Chrome & Firefox, but is still broken in IE9 (the search textbox doesn't have 100% width).

[ziali]

@ashleydw That's a great fix, however the suggestion box doesn't come over the top of my navigation menu, it hides behind it...will try to fix

Edit: It's a bit yucky, but I changed the .navbar z-index to 1. That makes the typeahead dropdown overlay the navbar, but I duno, is it "the best way"?

[shulima]

I can confirm it's broken in IE9, even with the workaround. @ashleydw 's fiddle demonstrates the problem if col-sm-3 is changed to something else (col-md-4 for example).

[nivesh2]

Any solution its input(text) with typeahead.js (modified css)

I find problem still prevails with IE9 and below,

IE 10, chrome and firefox works fine,

[gobid]

@ashleydw Great thank you so much your css works...i just had to remove .container { margin:30px; }

[karimlahlou]

Thank you @ashleydw, finally i got it working. for those need to adjust the list width, use this function:

$('.typeahead').typeahead({
remote: 'path/to/url'
}).on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$(this).width() + 'px');});

[pavelrogala]

I found a solution online that I'd like to share. This fixes the input box only. You still need to style the dropdown menu.

js:
$('.typeahead').typeahead(...);
$('.tt-hint').addClass('form-control');

css:
.twitter-typeahead{
width: 100%;
}

[mkarges]

Your're a life-saver, @ashleydw

[kuroe]

I have this version based on @ashleydw that will work with the current official release of Bootstrap 3 and the input groups. It will adapt to the size you pick for the input group and you don't have to tweak the js file too.

http://jsfiddle.net/qrtua/8/

It would be appreciated if anyone found any problem in this.

[jharding]

Hey everyone, what are the best libraries out there for integrating typeahead.js with Bootstrap? @hyspace's typeahead.js-bootstrap3.less project seems popular, are there any other projects out there that people have been using?

[cjbottaro]

@ashleydw CSS combined with @jalada fix worked for me using 0.10.1.

[dmwyatt]

@jharding was this closed because there is now an official version available?

[jharding]

Nope, it was closed cause there's not anything actionable to take from it as I have no interest in writing an official Bootstrap library for typeahead.js. Having said that, I'd be more than happy to advertise existing solutions written by others.

[obfischer]

This means that Bootstrap is not supported by typeahead.js.

[ThiefMaster]

Bah. 💩

[martinbean]

Searching this issue led me here. There should be an option to modify the CSS, mainly changing display: inline-block to display: block on the wrapping <span> tag.

[abibell]

It is quite sad to see that Bootstrap twitter's child will not be supported by its sibling typeahead.

You are right @martinbean it is the display: inline-block that is causing the issue. Isn't it a best practice to control the layout using CSS classes than style attributes? I think it makes sense to create a task to extract the styles to CSS.

[nickdos]

CSS work around based on comments above:

.input-group .twitter-typeahead {
    display: table-cell !important;
}

[mryellow]

"It is quite sad to see that Bootstrap twitter's child will not be supported by its sibling typeahead."

How does this:
"I haven't had a chance to take a look at Bootstrap 3 yet. It's on my TODO list."
Become this:
"I have no interest in writing an official Bootstrap library for typeahead.js"

Nothing actionable? Why not distribute CSS to go with your JS?

Seems this is the first thing every last user will look for, and best they can do is reconstructing a bunch of snippets from a multitude of sources?

[martinbean]

@jharding If you have no interest in writing “an official Bootstrap library” how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not.

[hyspace]

try this: https://github.com/hyspace/typeahead.js-bootstrap3.less if you just want to make it work with bootstrap.

[martinbean]

@hyspace It’s lovely you’ve made a fork and added Bootstrap styles an’ all (I’ve used it myself in past projects), but the issue here is: the package itself should either offer styles for use in Bootstrap, or not add styles inline so that it’s more customisable for users.

[jharding]

@jharding If you have no interest in writing “an official Bootstrap library” how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not.

Will be possible in v0.11.

[martinbean]

@jharding Awesome. Glad to hear it 😄

[DevChive]

@pavelrogala , you're a lifesaver!!
worked great w/ Bootstrap 3.2 and Typeahead v0.10.5

[RacerEvan55]

So bootstrap and typeahead are in the same twitter family. Bootstrap pulls their internal integrated typeahead implementation and says to use twitter typeahead.js, twitter even advertises bootstrap compatibility on their engineering blog (https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me)

yet after all that, now the typeahead developer claims he cant be bothered to support bootstrap (also the most widely used UI framework on the web). apparently doing so isnt interesting.

@jharding is your employer/supervisor aware of your stance on this that goes against previous communication from twitter?

what a mess of disfunction

[mryellow]

Astonishingly bizarre isn't it. Can't figure it out, is this project just babysitted by an employee, volunteer open source or actively part of the twitter universe.... If it's a real job with a pay cheque then someone in management needs to take a look and fix the department, it seems as if work is being avoided with a little redirection and not enough oversight.

[Jarvizx]

or add

.twitter-typeahead > .form-control{
  width: inherit !important;
}

[tiagoanleite]

@Jarvizx Solved my problem! Thanks!

[yogesh333]

Hi this is working fine in firefox but not in chrome & IE ...could you please suggest me something?

[yogesh333]

even if place holder is "End Date " in second text box. it is showing as above "mm/dd/yyyy" in chrome.

[monoblaine]

@yogesh333 This has nothing to do with typeahead.js library. It appears you are trying to use the "placeholder" attribute on an input type="date" field. According to this link, using placeholder attributes in date fields is not supported.

[yogesh333]

could you please tell me about the gap between glyphicon & textbox as given in above picture, which appears only in chrome but for other browser it is working fine.