Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#12144 closed defect (fixed)

TabContainer: text-align-left assumption bug

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

Description (last modified by bill)

The dijit.layout.TabContainer widget silently assumes that all descendants of its domNode inherit text-align:left style. If this is not true, tab "handle" boxes (boxes containing titles of individual tabs, e.g. "tab 1", "tab 2") disappear. Likely reason: the large "width: 50000px" style is assigned to .nowraptabstrip class in dijit theme css file (e.g. tundra.css) and this class is in turn assigned to wrapper DOM node containing tab handles. If that node somehow inherits text-align: center/right style from document that widget is placed into (that can easily happen and happened in my case) tab handle boxes are positioned in the center/right of this 50000px long wrapper node meaning tab handle boxes disappear out of view (get clipped). (Note that methods of dijit.layout.ScrollingTabContainer class use that 50000px width of wrapper node in its calculations, so fixing this bug requires understanding of those calculations.)

Change History (6)

comment:1 Changed 8 years ago by dojoCamel

The easiest way to fix this is applying explicit "text-align: left" style to wrapper DOM node containing tab handles. Can this be done by applying that style to .nowraptabstrip class (e.g. in dijit theme css file) remains to be decided.

comment:2 Changed 8 years ago by bill

Description: modified (diff)
Summary: dijit.layout.TabContainer: text-align-left assumption bugTabContainer: text-align-left assumption bug

OK, thanks for the report.

After a fix to dijit.css, and possible fix to dijit_rtl.css, we need to check RTL mode too, and then add automated tests to dijit/tests/layout/TabContainer.html for both LTR and RTL modes, with (and maybe without) a text-align: center on an ancestor.

I'm going to mark this for 1.7 now; if you could help on the fix and tests (after filing a CLA) then could get it into the 1.6 release.

comment:3 Changed 8 years ago by Chris Mitchell

Owner: set to bill

comment:4 Changed 8 years ago by bill

Resolution: fixed
Status: newclosed

(In [25421]) explicitly set text-align in case ancestor has non-standard setting, fixes #12144

comment:5 Changed 8 years ago by ben hockey

(In [25428]) add missing rtl selector from r25421. refs #12144

comment:6 Changed 8 years ago by bill

(In [25481]) bidi support for TabContainer text-dir setting (see dijit/tests/Bidi.html), refs #12144 !strict

Note: See TracTickets for help on using tickets.