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)
Change History (13)
Changed 7 years ago by
| Attachment: | TabContainer_rtl.less.patch added |
|---|
comment:1 Changed 7 years ago by
| Owner: | changed from bill to Alia Naguib |
|---|---|
| Status: | new → pending |
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.
comment:2 Changed 6 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | pending → closed |
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
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
| Attachment: | TabContainer_MyTestCase.html added |
|---|
Changed 6 years ago by
| Attachment: | TabContainer_Defect.jpg added |
|---|
comment:4 Changed 6 years ago by
| Summary: | dijit.TabContainer: borders are invisible in IE 8 → TabContainer: 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.
comment:5 Changed 6 years ago by
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
| 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
| Milestone: | tbd → 1.9 |
|---|---|
| Resolution: | invalid |
| Status: | closed → reopened |
| 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.
patch from Hossam Katory (IBM, CCLA)