How do I prevent jquery UI from adding styles automatically?

Question

I'm wondering what is the easiest way of telling jquery UI not to add style classes? I am trying to use the tabs plugin, which has a lot of functionality I want... but I actually want it to do NOTHING when it comes to styles. I want to be in total charge of it, because frankly, the defaults are too busy and just don't work for a minimlist design.

I found a similar question here...: jquery ui tabs major style change

... But they never got around to preventing the classes from being added in the first place.

You can just refuse to load the css theme at the top of the document, but then the tabs widget just ceases to work despite not causing any javascript errors. The entire situation is just awful to be in, and I'd hate to have to program my own tabs widget just because jquery UI refuses to let me use my own styles :(

Help?

One way would be to create your own theme with the themeroller and make everything as minimalist as possible. — brett, Dec 17 '10 at 17:33
@brett: Yeah, I thought about doing that... but I actually like some of the themes. Like the date picker and others are perfectly fine. I just want to tell it via some configuration option, "Hey, don't add any classes. If it looks like crap, let it be my fault!" — egervari, Dec 17 '10 at 17:35
I also want to point out that not loading the css theme at all causes the tabs plugin to not work, which is awful. — egervari, Dec 17 '10 at 20:32
Another way would be to separate themes for certain elements ie) use your minimalist theme for the majority of your page, and then use the styled one for the datepicker, etc — brett, Dec 27 '10 at 15:49

jyoseph · Answer 1 · 2010-12-17T20:42:57.507

If you want existing styling, with the exception of some widgets (tabs), you could add an outer div#mytabs and then override any default styling applied by jquery UI.

Quick (rough) demo to illustrate my point.

#mytabs #tabs2 ul.ui-tabs-nav{
    background:lime;
    border-radius:0;
}
#mytabs #tabs2.ui-tabs, #mytabs #tabs2.ui-widget{
    border:magenta;
    border-radius:0;
    background:cyan;
}

This would give you the option of using the default styling (even of tabs) in a different area. You could, of course, just change the styling (or again, do overrides) on the .ui-tabs-nav classes.

score 4 · Answer 2 · answered Dec 17 '10 at 18:58

4

If you're looking for a jQuery UI option that prevents the adding of classes, you are out of luck.

Your best bet is as @brett suggested, make a minimalist theme. Alternatively, I can imagine a javascript function that given an DOM element, searched through it and children looking for a list of classes in their class attribute, then removing each one. Seems evil though!

answered Dec 17 '10 at 18:58

Ryley

21,046
2
67
81

1

Pretty bad that this isn't an option yet. In some cases I have to write css to counter query ui. – Satbir Kira Sep 29 '15 at 09:11

score 1 · Answer 3 · edited Jun 25 '13 at 21:08

1

another option would be to remove selectively the class automatically added by jQueryUI

somehting like:

$('#accordion-no-jquery-style').children().attr('class', 'custom-accordion-style')

edited Jun 25 '13 at 21:08

slfan

8,950
115
65
78

answered Jun 25 '13 at 20:50

Antropy

11
1

score 0 · Answer 4 · answered Dec 04 '12 at 19:18

0

maybe add css scope while downloading jquery ui pack

answered Dec 04 '12 at 19:18

Michal - wereda-net

940
9
14

How do I prevent jquery UI from adding styles automatically?

4 Answers4