#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 )
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 10 years ago by
comment:2 Changed 10 years ago by
Description: | modified (diff) |
---|---|
Milestone: | 1.5.1 → 1.7 |
Summary: | dijit.layout.TabContainer: text-align-left assumption bug → TabContainer: 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 10 years ago by
Owner: | set to bill |
---|
comment:4 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
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.