Skip to content
This repository

Twitter Bootstrap is incompatible with jQuery UI styles #156

Closed
ianmurrays opened this Issue September 04, 2011 · 31 comments
Ian Murray

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?

Nico Rehwaldt

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.

Stephen Power

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

Nico Rehwaldt

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

Mathieu Delestre

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.

Ian Murray
Mark Otto
Owner

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.

Ian Murray
Nico Rehwaldt

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.

Jacob
Owner

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

Ian Murray
Mark Otto
Owner

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

Mark Otto mdo closed this September 13, 2011
Nikola Nikolov

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.

Ian Murray
Joshua McMichael

Yeah me too! :)

Nikola Nikolov

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

Devin Torres

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

Nikola Nikolov

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

Thibaut Barrère

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 :)

Thibaut Barrère

@bbenezech thanks a ton!

Thibaut Barrère

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

Mário Franco

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

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

John Herren

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.

Thibaut Barrère
Hugues Huygens

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

Devin Torres

@jhherren This is awesome man!

John Slegers

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

Thibaut Barrère

Is that still the case with boostrap 2?

Thibaut Barrère

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.