Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#14164 closed defect (fixed)

TabContainer: border line doesn't appear until browser is resized

Reported by: koya25 Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.6.1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

Hi there,

To best illustrate what i am talking about, I created a fiddle: http://jsfiddle.net/eF3TC/6/

Notice how when there is a single tab, the border line next to the tab is not drawn but if you resize the browser or add another tab it will appear!

Any ideas on what I can do to fix this behavior?

Thanks

Attachments (1)

tc.html (2.0 KB) - added by bill 8 years ago.
test case from fiddle (put next to dijit/ dir)

Download all attachments as: .zip

Change History (18)

comment:1 Changed 8 years ago by Adam Peller

Component: GeneralDijit

Questions should generally go to the dojo-interest mailing list

comment:2 Changed 8 years ago by ebengtso

Add tabsPane1.startup();. It should work

comment:3 Changed 8 years ago by bill

Description: modified (diff)
Summary: bug with tab boarder line not appearing until browser is resized!‏TabContainer: border line doesn't appear until browser is resized

Hmm, well the parser already calls startup(), so app shouldn't need to [when using the parser].

comment:4 Changed 8 years ago by bill

See also #13810, may be the same bug.

comment:5 Changed 8 years ago by koya25

@ebengtso, eventhough the parser already calls startup() as stated by Bill, I went ahead and tried explicitly calling startup() but that does not seem to make a difference and the issue still remains.

Any tricks I could try to get this issue resolved?

Thanks

comment:6 Changed 8 years ago by koya25

I found a fix for now.

If I do:

tabsPane1.layout(); or tabsPane1.resize();

This takes care of the problem.... Not a perfect solution but it will do for now.

Thanks

Changed 8 years ago by bill

Attachment: tc.html added

test case from fiddle (put next to dijit/ dir)

comment:7 Changed 8 years ago by bill

Milestone: tbd1.8
Owner: set to bill
Status: newassigned
Last edited 8 years ago by bill (previous) (diff)

comment:8 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [27031]:

CSS updates so TabContainer borders don't get hidden if there are off by one pixel placement errors.

It's complicated because we need to clip on the x-axis so there's no overflow due to the 50K width tab-strip... but avoiding cutting off borders by clipping on the y-axis. And browsers are still very quirky with the overflow-x / overflow-y combinations they support, see http://www.brunildo.org/test/Overflowxy2.html.

Also setting z-index: 0 on top level nodes of widgets that set z-index on internal nodes, to start a new stacking context. This avoids some rare behavior bugs if the application has other z-index:1 nodes outside of the layout widgets.

Fixes #13810, #14164. If additional changes are needed I'll just reference #14164.

comment:5 Changed 8 years ago by bill

In [27034]:

Woops, can't set overflow:visible on the .dijitTabListWrapper because then you can't set scrollLeft, thus tab scrolling doesn't work.

Rollback part of [27031] and instead fix TabContainer sizing when initial child is added. It was calculating the height of the TabController when the single tab was marked as unselected, rather than selected. This was inaccurate because in claro selected tabs are taller.

Refs #14164 !strict.

comment:6 Changed 8 years ago by bill

In [27035]:

remove accidental "debugger;" statement, refs #14164 !strict.

comment:7 Changed 8 years ago by bill

Resolution: fixed
Status: closedreopened

Causing errors on IE6 in Editor_FullScreen.html.

comment:8 Changed 8 years ago by bill

In [27351]:

Fix regression on IE6 where TabContainer contents overflow container, and height calculation are wrong. There may be some cases where the TabContainer bottom border doesn't show up, but better that than the overflow problem. Refs #14164 !strict.

comment:9 Changed 8 years ago by bill

Editor_FullScreen failed on IE6 because TabContainer overflow-y is set to "visible", and the _LayoutWidget.resize() call to getMarginBox() returned >600px even though the TabContainer's domNode has style="height: 500px".

Problem could be seen visually too, in test_FullScreen.html, as the Editor overflows the TabContainer.

comment:10 Changed 8 years ago by bill

Resolution: fixed
Status: reopenedclosed

comment:11 Changed 7 years ago by bill

In [30152]:

Don't specify <body> padding in em for test files; it causes the right border of the TabContainer to disappear in IE8 (due to some IE bug). Also removed some unneeded/inert CSS from the TabContainer test files. Fixes #16020. Note that the right border is still disappearing in IE6, but that's not worth fixing.

Had to change dijit.css to avoid problem where bottom border of TabContainer was disappearing again though. Changed TabContainer.domNode CSS from overflow-y:visible to overflow:visible. Overflow:visible was apparently problematic back in [27031] but seems to be working now. The change doesn't affect IE6 which has it's own overflow:hidden rule. Refs #14164.

comment:12 Changed 7 years ago by bill

In [30547]:

Make TabContainer overflow:visible rather than overflow-y:visible in 1.8 branch. It was already changed in trunk in [30152]. According to [27031] there was some browser where this caused problems with the sliding TabController, but I'm not seeing any issues. Fixes #16675 on 1.8 branch (it's already fixed on trunk), !strict. Also refs #13810, #14164.

comment:7 Changed 7 years ago by bill

In [30549]:

Make TabContainer? overflow:visible rather than overflow-y:visible in 1.7 branch. It was already changed in trunk in [30152]. According to [27031] there was some browser where this caused problems with the sliding TabController?, but I'm not seeing any issues. Fixes #16675 on 1.8 branch (it's already fixed on trunk), !strict. Also refs #13810, #14164.

Note: See TracTickets for help on using tickets.