3

I'm writing a jQuery UI widget and trying to stick to the built-in styles whenever possible, to allow theme-roller skinning. I have a structure that looks (simplified) roughly like this:

<div class='ui-state-active'>
    <div class='ui-state-default'>
        <div class='ui-icon ui-icon-triangle-1-e'/>
    </div>
</div>

The problem is that ui-icon switches its icon set depending on the ui-state of its ancestors. But ui-state-active on the element further up the hierarchy appears to take precedence over ui-state-default on its immediate parent, resulting in an icon that typically blends in with its background.

I could manually override the background for the ui-icon element, but then the widget is no longer themeable. Is there another way to prevent ui-state-active from affecting that icon?

DNS
  • 34,791
  • 17
  • 84
  • 123
  • 1
    Beware of self-closing DIVs: "In HTML 5, means . The slash is just syntactic sugar for people who are addicted to XML. The syntax is valid, but it is not a "self-closing tag". The distinction is important since
    means
    in HTML 5 and not
    as it does in XHTML." http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5
     – Diodeus - James MacFarlane Aug 22 '11 at 15:26
  • You can cheat and use a different tag, the use something like "span.ui-icon" – Diodeus - James MacFarlane Aug 22 '11 at 15:28

2 Answers2

2

The relevant ui css is this,

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }

It doesn't look like there is anything you can do while keeping themeroller compatibility. Apart from rethinking the layout of your DOM. 

<div class='ui-state-active'>

</div>
<div class='ui-state-default'>
    <div class='ui-icon ui-icon-triangle-1-e'/>
</div>
Andrew
  • 13,367
  • 12
  • 62
  • 79
1

You're going to have to either make some small modifications to the css, match the active to the default icon colour, or rethink why you have "inactive" items inside of "active items.

I would suggest the third option ;) but the lines of interest are:

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }

As you can see, the default and active states have the same specificity but the active state comes later, so without a change to their code or yours (or a blasphemous jQuery over-ride) you're stuck.

Sinetheta
  • 8,735
  • 4
  • 27
  • 52