Ticket #4401 (closed bug: notabug)

Opened 4 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

Description

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

Attachments

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

Change History

Changed 4 years ago by ZaBlanc

The jQuery code that causes the problem.

Changed 4 years ago by ZaBlanc

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

comment:1 Changed 4 years ago by scott.gonzalez

  • Component changed from ui.core to ui.tabs

comment:2 Changed 4 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.7.2

comment:3 Changed 4 years ago by joern.zaefferer

  • Milestone changed from 1.7.2 to 1.8

comment:4 Changed 4 years ago by joern.zaefferer

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

comment:5 Changed 4 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 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to invalid

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

Note: See TracTickets for help on using tickets.