#8291 closed enhancement (notabug)

Opened May 03, 2012 08:52AM UTC

Closed May 03, 2012 09:15AM UTC

ui-icons with ui-state-x inside ui-widget-content break

Reported by: endy Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.css-framework Version: 1.8.19
Keywords: Cc:
Blocked by: Blocking:
Description

Placing an icon with for example 'ui-state-default' to get the nice borders and styling break inside widgets. This applies to ui-state-highlight and ui-state-error also.

Observed from Chrome's console, the styles for the icon are defined (and overridden) in the following order:

.ui-widget-content .ui-icon {

background-image: url(images/ui-icons_cccccc_256x240.png);

}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

border: 1px solid #666;

background: #555 url(images/ui-bg_glass_20_555555_1x400.png) 50% 50% repeat-x;

font-weight: bold;

color: #EEE;

}

.ui-icon-arrowthick-2-n-s {

background-position: -128px -48px;

}

Because the background-position for the actual icon class comes before 'ui-state-default', the background-position is lost and the icon is displayed incorrectly. This can be fixed by adding an inline style ('background-position: -128px -48px;' in this example) for the icon, but this is not a feasible approach design-wise.

It should be possible to change the order in which the classes are defined in the stylesheets so that the icons' background-position does not get overridden so they could be used inside widgets with a common theme.

Attachments (0)
Change History (2)

Changed May 03, 2012 08:57AM UTC by endy comment:1

Sample use case here: http://jsfiddle.net/DrB2z/

Changed May 03, 2012 09:15AM UTC by rdworth comment:2

resolution: → invalid
status: new → closed

The ui-icon class is designed to work inside an element with the ui-state-default class, not on the same element. These are two different background images and positions (one is texture, one is icon sprite), they're not intended to be used on the same element, regardless of which one could be declared last.