Twitter Bootstrap is incompatible with jQuery UI styles

[ianmurrays]

I'm trying to use jQuery UI's datepicker and the calendar looks awful, because of how bootstrap styles tables (among other things). Is there a workaround for this?

[nikku]

There is none at the moment unless you completely reset the css styles for the specified table (use Firebug or what ever your favourite tool for web development is, get the table styles and create your own css class which resets these styles to default).

This is a general issue, as bootstrap applies styles in a very general fashion (see #141). In first releases one had to add .commons-table to apply the table styles while the style is now applied to all table elements.

[StephenPower]

Amen to this, I just spent an hour doing exactly what Nikku said...

[nikku]

I will create a new issue for that, as it is a general problem which deserves consideration in new releases of the CSS toolkit.

[ldbglobe]

As a workaround you can change apply rules for table in the les file to return on the original comportment and compile again

releases one had to add .commons-table to apply the table styles while the style is now applied to all table elements.

[ianmurrays]

That is one solution, although it does not fix the issue
unfortunately, since there are many other styles that interfere with
jquery ui's styles (or viceversa :P).

On 12-09-2011, at 10:42, ldbglobe
reply@reply.github.com
wrote:

As a workaround you can change apply rules for table in the les file to return on the original comportment and compile again

releases one had to add .commons-table to apply the table styles while the style is now applied to all table elements.

Reply to this email directly or view it on GitHub:
#156 (comment)

[mdo]

While we certainly don't want to have conflicts wherever possible, making Bootstrap work 100% with jQuery UI (or any other library for that matter) is likely a significant time investment. We'll have to do our best as we go to make this as easy as possible by doing things like this.

In v2.0.0, we're thinking about bringing back classes for elements like tables and forms. I really do hate adding the extra markup though, so that's the balancing act we're looking at.

[ianmurrays]

Maybe find a way to kind of sandbox jquery-ui's styles? I made an attempt at that but unsuccessfuly :(

On 12-09-2011, at 14:02, Mark Otto wrote:

While we certainly don't want to have conflicts wherever possible, making Bootstrap work 100% with jQuery UI (or any other library for that matter) is likely a significant time investment. We'll have to do our best as we go to make this as easy as possible by doing things like this.

In v2.0.0, we're thinking about bringing back classes for elements like tables and forms. I really do hate adding the extra markup though, so that's the balancing act we're looking at.

Reply to this email directly or view it on GitHub:
#156 (comment)

Ian Murray
twitter.com/Synt4x · fb.com/ianmurrays · github.com/ianmurrays
Linkworks (www.linkworks.cl)

[nikku]

Again, a nice thing to provide would be "reset-bootstrap-style" classes for contextual elements in which forms, tables and so on only get basic styles (if any) applied. This would allow developers to use tables without styling if explicitly desired.

I know this would blow up bootstrap quite a bit. Maybe it could just be provided as some sort of extension to it.

[fat]

Maybe someone will get inspired and just build a jquery-ui theme that uses bootstrap? Doesn't seem like it would be too hard.

[ianmurrays]

That would be awesome!

On 12-09-2011, at 15:48, Jacob Thornton wrote:

Maybe someone will get inspired and just build a jquery-ui theme that uses bootstrap? Doesn't seem like it would be too hard.

Reply to this email directly or view it on GitHub:
#156 (comment)

Ian Murray
twitter.com/Synt4x · fb.com/ianmurrays · github.com/ianmurrays
Linkworks (www.linkworks.cl)

[mdo]

Closing this issue—please follow along on #171 as we revisit some classes in v2.0.

[necks]

I've been working on a .less file that uses the bootstrap variables and mixins to replace the default jQuery UI theme. It's working pretty well for some of the features. Unfortunately it still requires the icons sprite.

[ianmurrays]

That's great though! Can't wait to see that ;)

Ian Murray S.
Twitter: @synt4x
GitHub: ianmurrays
Skype: ianmurrays

On 19-09-2011, at 12:35, necks
reply@reply.github.com
wrote:

I've been working on a .less file that uses the bootstrap variables and mixins to replace the default jQuery UI theme. It's working pretty well for some of the features. Unfortunately it still requires the icons sprite.

Reply to this email directly or view it on GitHub:
#156 (comment)

[jmcmichael]

Yeah me too! :)

[necks]

Hi, here is a pack with the less for Jquery UI. It's still in progress and some parts may look unrelated. But it think the sliders and the datepickers look good. http://neckssoft.eu/download.php?download=twitter-bootstrap-jqueryui-less

[devinus]

@necks how is the conversion today? Are you still working on it?

[necks]

@devinus I'm not working on it at the moment. But I promise I'll come back to it.

[thbar]

Is there anyone (apart from the work provided by @necks) with a working date-picker for bootstrap, or with partial fixes to make only the jquery-ui datepicker work?

My guess is that most people are actually trying to remove the styling in jquery-ui, to get something minimalistic which fits bootstrap :)

[bbenezech]

Check http://rails-admin-tb.herokuapp.com/ (username@example.com/password)

It's Bootstrap + Jquery-ui js + some aristo jquery-ui styling: http://taitems.github.com/Aristo-jQuery-UI-Theme/
Then you're just a few hacks away: https://github.com/sferik/rails_admin/blob/master/app/assets/stylesheets/rails_admin/ra.calendar-additions.css.scss

[thbar]

@bbenezech thanks a ton!

[thbar]

For those interested by @bbenezech example, here's the direct link with the date picker: http://rails-admin-tb.herokuapp.com/admin/drafts/new

[lightglitch]

Nice, I will use aristo theme as base convert it to less and add it to

https://github.com/lightglitch/bootstrap-xtra

[jhherren]

I figured out a quick fix that worked for me using an autocomplete widget. Create a custom theme with themeroller, then on the download page, choose 'Advanced Theme Settings'. Set the CSS scope to 'body'. Since the CSS rules you download will be prefixed with the body tag selector, they'll have higher specificity and will override bootstrap rules.

I've only tested this for an autocomplete widget but it seemed to work perfectly.

[thbar]

Hey John - thanks a ton, that's a great tip!

Le 10 nov. 2011 à 07:36, John Herren
reply@reply.github.com
a écrit :

I figured out a quick fix that worked for me using an autocomplete widget. Create a custom theme with themeroller, then on the download page, choose 'Advanced Theme Settings'. Set the CSS scope to 'body'. Since the CSS rules you download will be prefixed with the body tag selector, they'll have higher specificity and will override bootstrap rules.

I've only tested this for an autocomplete widget but it seemed to work perfectly.

---

Reply to this email directly or view it on GitHub:
#156 (comment)

[huug]

@jhherren tnx for the tip! It also works fine with the datepicker widget!

[jhherren]

Here's some work on a jQuery UI style that jives with bootstrap

[devinus]

@jhherren This is awesome man!

[jslegers]

jjQuery Bootstrap merges the features of Bootstrap 1.4 with the jQuery UI CSS framework ---> http://jslegers.github.com/jquery-bootstrap/

[thbar]

Is that still the case with boostrap 2?

[thbar]

ah ! just saw mark comment - looks like moving to bootstrap 2 is the way to go.

[PatrickMelia]

Does any one know how to get bootstrap date picker to work on all browsers? Or JQuery UI date picker to work bootstrap layout for mvc 4?