Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Twitter Bootstrap is incompatible with jQuery UI styles #156

Closed
ianmurrays opened this Issue · 31 comments
@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
@mdo
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.

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

@ianmurrays
@mdo
Owner

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

@mdo mdo closed this
@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
@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 :)

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

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

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

@cvrebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.