jquery widget css overrides my own css

Question

I'm using jquery tabs and a few other jquery widget.

Now, inside the tab, all the content is styled according to the jquery CSS. So, the easiest way is just to comment out or change a few of the jquery CSS definitions. But then obviously all the other widgets like autocomplete are not working anymore either.

How do other people solve this problem? My prefered solution would be, if I could leave the jquery CSS as it is, and just have my own default CSS inside the tabs back.

Example:

.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }

This overrides the text color in my tab. It's ok for the other widgets, but looks bad inside tab.

GregL · Accepted Answer · 2011-06-08 08:20:41Z

1

I would either use different CSS classes (or start using classes on the elements or a containing element if you aren't already) for your elements, so you aren't conflicting with the jQuery styles.

answered Jun 8, 2011 at 8:20

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Remy Over a year ago

Right. The problem is I have global definitions for things like fonts, colors, etc. And I don't wanna define them for every element again.

GregL Over a year ago

As an idea, try wrapping all your content in a div with a specific class, and then defining all your styles to be applied only within that containing div. e.g. div.my_class span { ... }. Then just use that same container inside the tabs. Does that work?

Remy · Accepted Answer · 2011-06-08 09:48:07Z

0

I think the solution is to remove the CSS class file with jquery, like in the example for the buttom tabs:

<script>
    $(function() {
        $( "#tabs" ).tabs();
        $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
            .removeClass( "ui-corner-all ui-corner-top" )
            .addClass( "ui-corner-bottom" );
    });
</script>

answered Jun 8, 2011 at 9:48

Remy

12.8k14 gold badges66 silver badges106 bronze badges

Collectives™ on Stack Overflow

jquery widget css overrides my own css

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related