Opened 12 years ago
Closed 12 years ago
#7687 closed defect (wontfix)
ContentPane renders width incorrectly in IE when there are scroll bars
Reported by: | scottoreilly | Owned by: | |
---|---|---|---|
Priority: | high | Milestone: | tbd |
Component: | Dijit | Version: | 1.2beta |
Keywords: | Cc: | [email protected]… | |
Blocked By: | Blocking: |
Description
When there is a vertical scroll bar in a content pane, the width acts like there's no scroll bar in IE.
I've tested this in IE6, IE7, Firefox 3, and Safari 3.1, and it's only a problem in IE6 and IE7.
<div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:25px;"> This is the ContentPane with a padding of 25px. <div style="width:100%; height:200px; background-color:blue;"> This is a div with a width of 100%. </div> </div>
Attachments (2)
Change History (6)
Changed 12 years ago by
Attachment: | ie_ContentPane_bug.png added |
---|
comment:1 Changed 12 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
That's how IE works, it's the different box sizing model, see http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
comment:2 Changed 12 years ago by
Resolution: | invalid |
---|---|
Status: | closed → reopened |
Sorry, Bill, that was kind of a bad example. I added the padding to show the difference between the DIVs and accidentally made things more confusing. For the IE screenshot I posted I was using IE7 in standards mode and I don't think the problem is caused by the box model bug.
In this second code example (screenshots included) I've removed the padding and added a second ContentPane? without scroll bars. As you can see, IE renders everything correctly when there are no scroll bars. The problem seems to be that the scroll bar width isn't accounted for in IE.
<div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:0;"> This is a ContentPane with a padding of 0 and a height of 100px. <div style="width:100%; height:200px; background-color:blue;"> This is a div with a width of 100% and a height of 200px. </div> </div> <br> <div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:0;"> This is a ContentPane with a padding of 0 and a height of 100px. <div style="width:100%; height:50px; background-color:blue;"> This is a div with a width of 100% and a height of 50px. </div> </div>
comment:3 Changed 12 years ago by
I was going to try to fix this problem myself and submit a patch. I didn't realize until now, however, that IE7 Standards Mode still has a different box model than other browsers. I'd known about the box model problems with padding, but had never tripped over the issue of 100% width ignoring the scroll bar width. http://www.web-zonez.com/screen/100/div/index.html
You'll probably want to close this out again. Sorry for the spam.
comment:4 Changed 12 years ago by
Resolution: | → wontfix |
---|---|
Status: | reopened → closed |
OK, yah, I didn't know about the scroll bar thing myself. I bet that's fixed/changed in IE8.
I'll close this out.
BTW next time please attach test cases using the attach file button instead of inlining the text. It makes it easier for us and avoids issues like confusion over standards vs quirks, etc.
Screenshots of correct and incorrect rendering