Opened 14 years ago

Closed 13 years ago

Last modified 13 years ago

#4401 closed bug (notabug)

Icons in Tabs Don't Work

Reported by: ZaBlanc Owned by:
Priority: major Milestone: 1.8
Component: ui.tabs Version: 1.7.1
Keywords: tabs, icon Cc:
Blocked by: Blocking:

Description

When I try to do an icon within a tab, the image doesn't line up right and breaks.

Attachments (2)

test.html​ (715 bytes) - added by ZaBlanc 14 years ago.
The jQuery code that causes the problem.
Picture 1.png​ (7.8 KB) - added by ZaBlanc 14 years ago.
Screenshot of issue. Note the icon won't display correctly.

Download all attachments as: .zip

Change History (8)

Changed 14 years ago by ZaBlanc

Attachment: test.html​ added

The jQuery code that causes the problem.

Changed 14 years ago by ZaBlanc

Attachment: Picture 1.png​ added

Screenshot of issue. Note the icon won't display correctly.

comment:1 Changed 14 years ago by Scott González

Component: ui.core → ui.tabs

comment:2 Changed 14 years ago by Jörn Zaefferer

Milestone: TBD → 1.7.2

comment:3 Changed 14 years ago by Jörn Zaefferer

Milestone: 1.7.2 → 1.8

comment:4 Changed 14 years ago by Jörn Zaefferer

Works without ui-state-default: ​http://jsbin.com/eyize/edit

comment:5 Changed 13 years ago by corey.hart

As a note, I found that the conflict comes from the .ui-widget-content selector that gets added to both the element wrapper, and the tab pane.

When this happens, the css selector under Interaction States gets triggered: 

.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #c5dbec; background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; outline: none; }

This removes previous background properties set on non descendent selectors.

comment:6 Changed 13 years ago by Scott González

Resolution: → invalid
Status: new → closed

Icons aren't meant to have states. The states belong on an ancestor.

Note: See TracTickets for help on using tickets.