Opened 8 years ago

Closed 8 years ago

#8291 closed enhancement (notabug)

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.

Change History (2)

comment:1 Changed 8 years ago by endy

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

comment:2 Changed 8 years ago by rdworth

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.