Bootstrap 3 broken style #378

Closed
Stajor opened this Issue Jul 31, 2013 · 72 comments

Projects

None yet
@Stajor
Stajor commented Jul 31, 2013

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

@jharding
Contributor
jharding commented Aug 1, 2013

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
bhays commented Aug 2, 2013

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
Contributor
jharding commented Aug 2, 2013

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
kuroe commented Aug 4, 2013

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
kuroe commented Aug 12, 2013

@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.

@Marcpepe

Thx @ashleydw, that worked great for me!

@nivesh2
nivesh2 commented Aug 17, 2013

Thx @ashleydw, works for me too!

@ErikSchierboom

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

@kand
kand commented Aug 22, 2013

@ashleydw looks great! thanks!

@ArlingtonHouse

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

@kand
kand commented Aug 22, 2013

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
ocodia commented Aug 27, 2013

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

@ziali
ziali commented Aug 27, 2013

@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
shulima commented Aug 28, 2013

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
nivesh2 commented Aug 28, 2013

Any solution its input(text) with typeahead.js (modified css)
ie9
I find problem still prevails with IE9 and below,
ie10
IE 10, chrome and firefox works fine,

@govindad

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

@ragulka ragulka referenced this issue in sliptree/bootstrap-tokenfield Sep 2, 2013
Closed

Cross-browser compatibility issues #13

@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
mkarges commented Sep 21, 2013

Your're a life-saver, @ashleydw

@kuroe
kuroe commented Sep 25, 2013

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.

@tom-dudman

Fantastic, thank you @kuroe ! There are two issues I've encountered:

  1. If the input is the last element of the .input-group, then it does not get the RHS border radii.
  2. The input does not "glow" (box-shadow?) on focus

http://jsfiddle.net/qrtua/9/

@kuroe
kuroe commented Sep 26, 2013

@the-duddo both fixed and I also added support for warning, error and success state.

http://jsfiddle.net/kuroe/qrtua/14/

@YSmetana

@kuroe many thanks! Last code solved all visible issues for me!

@krnlde
krnlde commented Oct 6, 2013

@kuroe nice work! ty

@ragulka
Contributor
ragulka commented Oct 16, 2013

@kuroe thanks, but there are problems when typeahead is not inside an input-grpup:
screen shot 2013-10-16 at 10 08 50

EDIT: Here's a link to a jsfiddle demonstrating the problem: http://jsfiddle.net/qrtua/23/

@ragulka
Contributor
ragulka commented Oct 16, 2013

I went ahead and based a new version on @kuroe . It will fix the aforementioned issue with typeaheads outside of input groups. Please note: in order for input-sm and input-lg to work, it's also required to add a littlebit of javascript - please look at the end of the JS section to see what I mean.

http://jsfiddle.net/ragulka/Dy9au/1/

Any comments or issues are welcome.

@lzrski
lzrski commented Oct 30, 2013

Thanks a lot @ragulka, it works for me.

@YSmetana
YSmetana commented Nov 1, 2013

Many thanks @ragulka ! Looks great!

@clabra
clabra commented Nov 8, 2013

Thank you @ragulka. Your styles worked for me after update bootstrap from v2.3.0 to 3.0.2.

@alagappanr

Thanks for that @ragulka and @ashleydw. Fixed my issues.

@iamkevinv

@ragulka, it looks like the styles you've supplied are generated from some LESS - do you mind providing the uncompiled LESS code?

@obfischer

Can you please fix it?

@JeromeRocheteau

@kuroe thank you very much :) it perfectly works!

@hyspace
hyspace commented Dec 15, 2013

@jhardingI @obfischer @JeromeRocheteau @kevdesign

I made a less version using bootstrap mixins and variables and did some test.

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

examles:

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

I also wrote some unit tests for it:

https://travis-ci.org/hyspace/typeahead.js-bootstrap3.less

try it out.

@fnascimento00

temp

This problem occurs only in IE 11, and it was resolved:

.twitter-typeahead {
display: block !important;
}

@noetix
noetix commented Jan 1, 2014

@hyspace THANK YOU!

@lowwa132
lowwa132 commented Jan 3, 2014

Good job @hyspace !

@kbwatts
kbwatts commented Jan 16, 2014

@hyspace Seems to work, thank you for sharing 👍

@p-saovapakhiran

@hyspace Thank you so much!

@jalada
jalada commented Feb 3, 2014

For 0.10.0 I had to do a find/replace across @ragulka's CSS, replacing tt-query with tt-input and tt-is-under-cursor with tt-cursor, then everything looked reasonably OK.

@bmcbride
bmcbride commented Feb 7, 2014

@fnascimento00's solution for IE 11 seems to fix similar issues with BS 3.1.0 on Chrome.

@jharding
Contributor

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.

@jharding jharding closed this Mar 9, 2014
@dmwyatt
dmwyatt commented Apr 16, 2014

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

@jharding
Contributor

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
abibell commented May 27, 2014

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
nickdos commented Jun 6, 2014

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
hyspace commented Aug 17, 2014

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
Contributor

@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 😄

@dsuess
dsuess commented Aug 22, 2014

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

@s01ipsist s01ipsist referenced this issue in yourabi/twitter-typeahead-rails Oct 2, 2014
Closed

Missing CSS #4

@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
mryellow commented Nov 7, 2014

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
Jarvizx commented Nov 13, 2014

or add

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

@Jarvizx Solved my problem! Thanks!

@blueghostuk blueghostuk added a commit to blueghostuk/traindelayed that referenced this issue Feb 23, 2015
@blueghostuk blueghostuk use less for css + fix typeahead fa8b46f
@yogesh333

rooforders myaccount
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment