Opened 7 years ago

Closed 6 years ago

#16020 closed defect (fixed)

TabContainer: right border invisible on IE8 when width 100% and body has em border

Reported by: Alia Naguib Owned by: Alia Naguib
Priority: undecided Milestone: 1.9
Component: Dijit Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description

Locale: English

Browsers: IE8/Windows 7

Procedure:

1- Set the width of TabContainer? to 100%

Expected Result:

1- The rightmost border of the container is invisible

Actual Result:

2- All borders should be visible

Attachments (6)

TabContainer_rtl.less.patch (398 bytes) - added by Douglas Hays 7 years ago.
patch from Hossam Katory (IBM, CCLA)
dijit.css.patch (338 bytes) - added by Douglas Hays 7 years ago.
patch from Hossam Katory (IBM, CCLA)
TabContainer_full.html (3.4 KB) - added by bill 7 years ago.
my test case
TabContainer_MyTestCase.html (2.8 KB) - added by Alia Naguib 6 years ago.
TabContainer_Defect.jpg (83.9 KB) - added by Alia Naguib 6 years ago.
TabContainer_reduced.html (1.3 KB) - added by bill 6 years ago.
put in root dir as sibling of dojo/. if you remove the dijitTests.css from this test case then the problem goes away

Download all attachments as: .zip

Change History (13)

Changed 7 years ago by Douglas Hays

Attachment: TabContainer_rtl.less.patch added

patch from Hossam Katory (IBM, CCLA)

Changed 7 years ago by Douglas Hays

Attachment: dijit.css.patch added

patch from Hossam Katory (IBM, CCLA)

comment:1 Changed 7 years ago by bill

Owner: changed from bill to Alia Naguib
Status: newpending

Did you confuse the expected result with the actual result? What you typed above was strange.

Also, from your patches, it seems like this issue only happens in RTL mode?

I can't really see any of the left, bottom, or right borders on IE8 or chrome/mac. Not sure if they aren't appearing or if they just blend in with the browser's border. In any case though it's not a good UI design to have the TabContainer's borders flush with the browser's borders, so I'm reluctant to change anything to make that work.

Last edited 7 years ago by bill (previous) (diff)

Changed 7 years ago by bill

Attachment: TabContainer_full.html added

my test case

comment:2 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:3 Changed 6 years ago by Alia Naguib

Yes, I did switch the actual with the expected result. I apologize for that. This defect happens in IE8 on Windows 7. It is not related with the direction of the widget whether it is RTL or LTR. I attached a screenshot to further clarify the problem. Also, I attached the test case that I am using.

Changed 6 years ago by Alia Naguib

Changed 6 years ago by Alia Naguib

Attachment: TabContainer_Defect.jpg added

comment:4 Changed 6 years ago by bill

Summary: dijit.TabContainer: borders are invisible in IE 8TabContainer: right border invisible on IE8 when width 100%

I see it. Also happens in test_TabContainer.html. It's a strange bug.

First, I note that the test cases are in standards mode, so it's using content box sizing on all browsers.

On my machine, the TabContainer's width is 920px. The div.dijitTabPaneWrapper has 1px border on the left/right/top, so its width is set to 918px. Yet the IE developer toolbar layout tab shows that its width is stuck at 920px. On FF the width shown in the layout tab's width is correctly reduced by 2px.

PS: In retrospect that looks like a red herring. Seems the layout tab reports the border box or margin box width and height.

Last edited 6 years ago by bill (previous) (diff)

comment:5 Changed 6 years ago by bill

Actually, the problem only happens because dijitTests.css is included. See attached test case and remove the include of dijitTests.css to make it go away.

Changed 6 years ago by bill

Attachment: TabContainer_reduced.html added

put in root dir as sibling of dojo/. if you remove the dijitTests.css from this test case then the problem goes away

comment:6 Changed 6 years ago by bill

Milestone: tbd1.9
Resolution: invalid
Status: closedreopened
Summary: TabContainer: right border invisible on IE8 when width 100%TabContainer: right border invisible on IE8 when width 100% and body has em border

More specifically, it starts failing due to this CSS:

body {
	padding:2em 2em 2em 2em;
}

If I replace it with a px setting like below, the border shows up:

body {
	padding: 22px;
}

So, seems just like an IE quirk. I'll change the CSS to avoid this display glitch.

comment:7 Changed 6 years ago by bill

Resolution: fixed
Status: reopenedclosed

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.

Note: See TracTickets for help on using tickets.