CODEWITHSUNDEEP
jquery-ui
Sackling
Sackling

Reputation: 1820

different jquery ui buttons at the same time

Is there a proper way to have 2 differently styled jquery ui buttons on the same page?

I am able to copy css around for the second button but there are a lot of different !important styles that I keep needing to add a second !important after the first in order to change the style.

for ex:

 .ui-state-active {
    background:none !important;
    background-color:#E1E1E1 !important; 
    color:#000 !important;
 }

I will then have to go and add right after (and it needs to be after

 .new-theme.ui-state-active {
    background:none !important;
    background-color:red !important; 
    color:#000 !important; 
 }

the problem is these important styles are all over for each state so I have to mind where they go. Is this normal or is this usually handled a different way?

Upvotes: 0

Views: 41

Answers (2)

OzrenTkalcecKrznaric
OzrenTkalcecKrznaric

Reputation: 5646

I would recommend using jqueryui-speciffic css. Except difficulties with different button stylings, there may be performance problems while rendering larger amounts of buttons. This resource is relatively old but I found it very valuable while using jqueryui css.

Upvotes: 0

dc5
dc5

Reputation: 12431

Are you using an older version of jQuery UI that requires you to use !important to override their styles? Newer version have fixed this: Use of !important in jquery-ui.css should be avoided.

If you can/are using a newer version, try getting rid of !important and instead rely on selector specificity to get your desired results.

Upvotes: 1

Related Questions