CODEWITHSUNDEEP
cssjquery-uitwitter-bootstrap
Maxim V. Pavlov
Maxim V. Pavlov

Reputation: 10509

jQuery UI and Bootstrap theme collission

I have both, jQuery UI theme and a Bootstrap 2.1 css linked to my page. In cases I use Bootstrap-styled buttons, no text is displayed on them. It turned out that it was these lines in jQuery UI's theme that are causing the problem:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }

When removed in a debug tool, 1em no longer casts the button text to be so small that it is invisible. I have made sure the Bootstrap.css in likned later in the stylesheets list so it has more value, but the jQuery UI's defeiniciton is more specific. How can I preven jQuery UI css data to influence my bootstrap buttons?

Upvotes: 5

Views: 1837

Answers (2)

Marc
Marc

Reputation: 11613

Buttons, in particular, are a problem. jQuery UI's button implementation conflicts with Bootstrap's. If you want to use them in their standard form, you can add the following lines to your page, prior to the widget initializations, to eliminate the conflict:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn

I've only tested this in the simple cases, but I presume it works in general. The approach is described here with appropriate reference links:

http://www.dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/

Upvotes: 5

Ametista
Ametista

Reputation: 21

You can combine the best of both worlds with this theme: http://addyosmani.github.com/jquery-ui-bootstrap

Upvotes: 2

Related Questions