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

Question

Hi all

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:

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!

Answer 1

use ! important in your styles. this indicates that nothing else is supposed to override your styles.

Check this link for details.

Answer 2

You can put you tab content in iframe and add diffrent style with style tag in head of iframe content.

Answer 3

use jquery's removeClass() function to remove unwanted class names but that could cause the widget to not function if a function is called by that classname.

example:

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

or you could add a class using addCLass() to overide the styles

example:

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

or target the element name

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

call the function at the end of your widget declaration.

$(document).ready(function() {

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

});