PDA

View Full Version : [OPEN] [3.3.x] IE7 rendering vbox layouts incorrectly depending on doctype



tungj
14 Jan 2011, 11:16 AM
Ext version tested:


Ext 3.3.1
Ext 3.3.0



Adapter used:


ext



css used:


only default ext-all.css



Browser versions tested against:


IE7



Operating System:


WinXP Pro



Description:


When a doctype is specified, the size calculations for buttons inside a vbox within a window seem to be wrong, causing them to touch the bottom edge despite margins being set. (they go off the bottom if the margins aren't set).



Test Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>VBox DocType Test Case (With DocType)</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
</head>
<body>
<script type="text/javascript">

Ext.onReady(function(){
new Ext.Window({
width: 300,
height: 300,
layout: 'vbox',
title: 'Test Form',
defaults: {
flex: 1,
xtype: 'button'
},
layoutConfig: {
align: 'stretch',
padding: 5
},
items: [
{
text: 'Select'
}, {
text: 'Rectangle'
}, {
text: 'Circle'
}, {
text: 'Polygon'
}
]
}).show();
});
</script>
<div> sometext </div>
</body>
</html>
Steps to reproduce the problem:


Copy the sample code to ext-3.3.1/examples.
View page in browser, note that the buttons are touching the bottom (as in doctype_strict.PNG)
Change doctype to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, verify rendering issue still occurs (as in doctype_transitional.PNG)
Remove doctype, verify that the layout is correct (as in doctype_none.PNG)



The result that was expected:


A regular margin around all the buttons



The result that occurs instead:


Buttons touch the bottom of the window



Screenshot or Video:


attached



Debugging already done:


Testing under different browsers and doctypes. This seems to work in Firefox/IE8.



Possible fix:


Leaving out a doctype, though that's not ideal. Some examples have doctypes and some don't: http://dev.sencha.com/deploy/dev/examples/form/form-grid.html has them, while http://dev.sencha.com/deploy/dev/examples/form/xml-form.html doesn't. While some of the tutorials suggest leaving out the doctype; there's some discussion of doctypes in http://www.sencha.com/forum/showthread.php?74497-What-doctype-should-I-use-with-Ext-JS which suggest doing so can cause problems (e.g. menu events). (and not standards-compliant).

Condor
17 Jan 2011, 12:11 AM
Can't reproduce this problem with the code you posted and the screenshots don't match this code.

Are you sure you've posted the correct code?

tungj
17 Jan 2011, 2:09 AM
Sorry, yes, I've edited my first post to match the simplified test case used in the screenshots. The original test case exhibited the same rendering issue in IE7 when you clicked on the 2nd tab, but I found that the first tab was unnecessary and so removed it for the screenshots but forgot to update the post. This was tested on IE 7.0.5730.13.

[edit: There was also whitespace before the DOCTYPE which wasn't in the real test .html file and may have been significant; interestingly enough I can also reproduce the same rendering error in IE8 if I have whitespace before the strict doctype]

[edit #2: If editing the DOCTYPES for a file, you have to open the file again in a new tab otherwise IE reuses the old renderer (ignoring the new doctype) despite pressing F5/Ctrl-F5 to refresh. Noticed this by viewing source on the file with the new document and observing that the DOCTYPE had updated but the rendering issues remained until the file was opened on a new tab. ]