Opened 11 years ago

Closed 11 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: development-staff@…
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)

ie_ContentPane_bug.png (17.7 KB) - added by scottoreilly 11 years ago.
Screenshots of correct and incorrect rendering
ie_ContentPane_bug2.png (33.3 KB) - added by scottoreilly 11 years ago.
Better example of this problem

Download all attachments as: .zip

Change History (6)

Changed 11 years ago by scottoreilly

Attachment: ie_ContentPane_bug.png added

Screenshots of correct and incorrect rendering

comment:1 Changed 11 years ago by bill

Resolution: invalid
Status: newclosed

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 11 years ago by scottoreilly

Resolution: invalid
Status: closedreopened

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>

Changed 11 years ago by scottoreilly

Attachment: ie_ContentPane_bug2.png added

Better example of this problem

comment:3 Changed 11 years ago by scottoreilly

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 11 years ago by bill

Resolution: wontfix
Status: reopenedclosed

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.

Note: See TracTickets for help on using tickets.