New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 3 broken style #378

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

Comments

@Stajor

Stajor commented Jul 31, 2013

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

@jharding

This comment has been minimized.

Show comment
Hide comment
@jharding

jharding Aug 1, 2013

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@ericsaupe

ericsaupe Aug 1, 2013

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.

ericsaupe commented Aug 1, 2013

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

This comment has been minimized.

Show comment
Hide comment
@bhays

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

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

This comment has been minimized.

Show comment
Hide comment
@jharding

jharding Aug 2, 2013

Contributor

Thanks for doing that @bhays.

Contributor

jharding commented Aug 2, 2013

Thanks for doing that @bhays.

@apexskier

This comment has been minimized.

Show comment
Hide comment
@apexskier

apexskier Aug 2, 2013

+1 @bhays

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

apexskier commented Aug 2, 2013

+1 @bhays

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

@apexskier

This comment has been minimized.

Show comment
Hide comment
@apexskier

apexskier Aug 2, 2013

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

apexskier commented Aug 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@kuroe

kuroe 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/

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

This comment has been minimized.

Show comment
Hide comment
@tom-dudman

tom-dudman Aug 9, 2013

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/

tom-dudman commented Aug 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@kuroe

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

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.

@ashleydw

This comment has been minimized.

Show comment
Hide comment
@ashleydw

ashleydw commented Aug 16, 2013

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

@Marcpepe

This comment has been minimized.

Show comment
Hide comment
@Marcpepe

Marcpepe Aug 17, 2013

Thx @ashleydw, that worked great for me!

Marcpepe commented Aug 17, 2013

Thx @ashleydw, that worked great for me!

@nivesh2

This comment has been minimized.

Show comment
Hide comment
@nivesh2

nivesh2 Aug 17, 2013

Thx @ashleydw, works for me too!

nivesh2 commented Aug 17, 2013

Thx @ashleydw, works for me too!

@ErikSchierboom

This comment has been minimized.

Show comment
Hide comment
@ErikSchierboom

ErikSchierboom Aug 20, 2013

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

ErikSchierboom commented Aug 20, 2013

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

@kand

This comment has been minimized.

Show comment
Hide comment
@kand

kand Aug 22, 2013

@ashleydw looks great! thanks!

kand commented Aug 22, 2013

@ashleydw looks great! thanks!

@ArlingtonHouse

This comment has been minimized.

Show comment
Hide comment
@ArlingtonHouse

ArlingtonHouse Aug 22, 2013

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

ArlingtonHouse commented Aug 22, 2013

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

@kand

This comment has been minimized.

Show comment
Hide comment
@kand

kand Aug 22, 2013

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

kand commented Aug 22, 2013

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

@ericsaupe

This comment has been minimized.

Show comment
Hide comment
@ericsaupe

ericsaupe Aug 22, 2013

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

ericsaupe commented Aug 22, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@ashleydw

ashleydw Aug 22, 2013

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.

ashleydw commented Aug 22, 2013

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 comment has been minimized.

Show comment
Hide comment
@ocodia

ocodia Aug 27, 2013

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

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

This comment has been minimized.

Show comment
Hide comment
@ziali

ziali 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"?

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

This comment has been minimized.

Show comment
Hide comment
@shulima

shulima 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).

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

This comment has been minimized.

Show comment
Hide comment
@nivesh2

nivesh2 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,

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,

@gobid

This comment has been minimized.

Show comment
Hide comment
@gobid

gobid Aug 29, 2013

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

gobid commented Aug 29, 2013

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

@karimlahlou

This comment has been minimized.

Show comment
Hide comment
@karimlahlou

karimlahlou Sep 16, 2013

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

karimlahlou commented Sep 16, 2013

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

This comment has been minimized.

Show comment
Hide comment
@pavelrogala

pavelrogala Sep 20, 2013

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%;
}

pavelrogala commented Sep 20, 2013

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

This comment has been minimized.

Show comment
Hide comment
@mkarges

mkarges Sep 21, 2013

Your're a life-saver, @ashleydw

mkarges commented Sep 21, 2013

Your're a life-saver, @ashleydw

@kuroe

This comment has been minimized.

Show comment
Hide comment
@kuroe

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

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.

@cjbottaro

This comment has been minimized.

Show comment
Hide comment
@cjbottaro

cjbottaro Mar 1, 2014

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

cjbottaro commented Mar 1, 2014

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

@jharding jharding closed this Mar 9, 2014

@dmwyatt

This comment has been minimized.

Show comment
Hide comment
@dmwyatt

dmwyatt Apr 16, 2014

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

dmwyatt commented Apr 16, 2014

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

@jharding

This comment has been minimized.

Show comment
Hide comment
@jharding

jharding Apr 23, 2014

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.

Contributor

jharding commented Apr 23, 2014

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 comment has been minimized.

Show comment
Hide comment
@obfischer

obfischer Apr 23, 2014

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

obfischer commented Apr 23, 2014

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

@ThiefMaster

This comment has been minimized.

Show comment
Hide comment
@ThiefMaster

ThiefMaster commented May 4, 2014

Bah. 💩

@martinbean

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean May 13, 2014

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.

martinbean commented May 13, 2014

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

This comment has been minimized.

Show comment
Hide comment
@abibell

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

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

This comment has been minimized.

Show comment
Hide comment
@nickdos

nickdos Jun 6, 2014

CSS work around based on comments above:

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

nickdos commented Jun 6, 2014

CSS work around based on comments above:

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

This comment has been minimized.

Show comment
Hide comment
@mryellow

mryellow Aug 16, 2014

"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?

mryellow commented Aug 16, 2014

"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

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Aug 17, 2014

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

martinbean commented Aug 17, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@hyspace

hyspace Aug 17, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Aug 17, 2014

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

martinbean commented Aug 17, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@jharding

jharding Aug 17, 2014

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.

Contributor

jharding commented Aug 17, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Aug 17, 2014

@jharding Awesome. Glad to hear it 😄

martinbean commented Aug 17, 2014

@jharding Awesome. Glad to hear it 😄

@DevChive

This comment has been minimized.

Show comment
Hide comment
@DevChive

DevChive Aug 22, 2014

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

DevChive 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 Oct 2, 2014

Closed

Missing CSS #4

@RacerEvan55

This comment has been minimized.

Show comment
Hide comment
@RacerEvan55

RacerEvan55 Nov 7, 2014

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

RacerEvan55 commented Nov 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mryellow

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

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

This comment has been minimized.

Show comment
Hide comment
@Jarvizx

Jarvizx Nov 13, 2014

or add

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

Jarvizx commented Nov 13, 2014

or add

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

This comment has been minimized.

Show comment
Hide comment
@tiagoanleite

tiagoanleite Dec 9, 2014

@Jarvizx Solved my problem! Thanks!

tiagoanleite commented Dec 9, 2014

@Jarvizx Solved my problem! Thanks!

blueghostuk added a commit to blueghostuk/traindelayed that referenced this issue Feb 23, 2015

@yogesh333

This comment has been minimized.

Show comment
Hide comment
@yogesh333

yogesh333 Mar 17, 2015

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

yogesh333 commented Mar 17, 2015

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

@yogesh333

This comment has been minimized.

Show comment
Hide comment
@yogesh333

yogesh333 Mar 17, 2015

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

yogesh333 commented Mar 17, 2015

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

@monoblaine

This comment has been minimized.

Show comment
Hide comment
@monoblaine

monoblaine Mar 17, 2015

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

monoblaine commented Mar 17, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@yogesh333

yogesh333 Mar 17, 2015

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.

yogesh333 commented Mar 17, 2015

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