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

Question

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!

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 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");  });