Opened 12 years ago

Closed 12 years ago

#11156 closed defect (fixed)

TabContainer: unequal tab heights w/closable + unclosable tabs (Chrome)

Reported by: bill Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit Version: 1.5.0b2
Keywords: Cc:
Blocked By: Blocking:


See themeTester.html. The line under the unselected tabs extends under the selected tab too. Plus the closable tab is 1px too tall, overlapping the line.

Problem relates to issues w/the close icon being nested inside the closeButton span, so that vertical-align:middle and sizing calculations aren't working correctly.

Change History (1)

comment:1 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(In [22187]) Fix a number of TabContainer issues related to close icon:

  • no [x] text appears in IE7 or IE quirks high-contrast RTL mode (fixes #11153)
  • icon appears on left rather than right in RTL mode
  • hover effect broken in tundra, soria, nihilo (regression from [21144], refs #10613)
  • height problems mixing closable and unclosable tabs on webkit (fixes #11156, !strict):
    • border under unselected tabs also appears under selected tab
    • closable tabs are 1px too tall, obscuring that same border
  • hovering close button in high-contrast mode causes tab to expand horizontally

The main change was to make the close icon a sibling of the label, rather than nested inside of the closeButton span. This avoids browser bugs on webkit and IE. Also stopped using an <img> tag to display the icon since that has issues with the title/alt attributes on IE6/7.

Note: See TracTickets for help on using tickets.