Reputation: 1744

JQuery UI Tabs - How to prevent styles being applied to content within tabs?

I have implemented the JQuery UI tabs and they work great, except for one problem...

All my content's styles / classes are being overriden by JQuery's, which I do not want to happen.For example, I have a text box:

<input type="text" id="profileFirstName" name="profileFirstName" class="textMedium" />

If I inspect the styles in Firebug, I see this (in this order):

.ui-widget :active {
outline:medium none;
}

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

input.textMedium {
width:200px;
}

As you can see, JQuery has added the ui-widget styles before my own, thus overriding mine.

It is doing this everywhere I have implemented the tabs. How do I set it GLOBALLY so that its styles don't override mine?? I do not want any of the jquery styles affecting the tabbed content.

I suppose I could override their ui-widget styles and put nothing under the definitions? But I would like to know if there is a cleaner way so that their ui-widget styles don't get applied at all.

Thanks in advance!

Upvotes: 28

Answers (6)

Zebra

Reputation: 4006

you could use removeClass() to remove class values but the widget might not work if you do.

example:

$('.myitem').removeClass('ui-widget');

I suggest you add new class values using addClass() to overide the styles

example:

$('.myitem').addClass('newClass');

or target the element(s)

$('p').addCLass('newClass');

and call the function at the end of your widget declaration.

$(document).ready(function() {

    $("#MyItem").draggable();
    //here
    $("#MyItem").addClass("newClass");

});

Upvotes: 6

Adina

Reputation: 21

You don't have to include any css for tabs. Just put one css line: .ui-tabs-hide { display:none; } and it will work.

Upvotes: 2

peter n

Reputation: 1280

I know its one year later but I found out that this section of the UI.css file was the primary culprit of style propagation:

/* Component containers
----------------------------------*/
.ui-widget { /*font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; */}
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {/* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em;*/ }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

Commenting it out will solve most of the problems (well, until you update the UI again).

Upvotes: 3

Garland Pope

Reputation: 3271

I had the same problem and solved it using .removeClass as dany suggested:

$("#menu").tabs();
$("#menu, #menu *").removeClass(function(index, class) {
    // I want to keep these classes because I style them myself,
    // so remove them from the string of classes
    class = class.replace(/ui-tabs-nav|ui-state-active|ui-tabs-hide/,'');
    // Create array of remaining classes that begin with "ui-"
    var matches = class.match(/ui-\S+/g) || [];
    // return classes as space-delimited list
    return (matches.join(' '));
});

h/t to @fancyPT for his generic class removal example on the .removeClass page.

Upvotes: 3