PDA

View Full Version : [CLOSED] [3.3.x] IE8 bug: hbox with pack: 'end' and formlayout child



nsolsen
3 Dec 2010, 8:06 AM
Ext version tested:


Ext 3.3.0
Ext 3.3.1


Adapter used:


ext


css used:


only default ext-all.css


Browser versions tested against:


IE8
FF3.6 (firebug 1.6.0 installed)
Safari 5
Chrome 7
Opera 10



Operating System:


Linux
Windows 7


Description:


I have a panel with hbox layout and pack: 'end'. The only child is a container with form layout and a couple of fields.
The problem is that on IE (only IE8 tested), the child container is flushed to the left side instead of the right side as expected.
On all other browsers, the child is flushed to the right as expected.


Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>IE bug: hbox layout with pack: "end"</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-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function() {
var w = new Ext.Window({
height: 180,
width: 500,
layout: { type: 'hbox', pack: 'end', defaultMargins: { top: 10, bottom: 10, left: 10, right: 10 } },
items: [
{
xtype: 'container',
layout: 'form',
labelWidth: 45,
defaults: { style: 'text-align: right' },
defaultType: 'textfield',
items: [
{ fieldLabel: 'Field 1', name: 'f1' },
{ fieldLabel: 'Field 2', name: 'f2' },
{ fieldLabel: 'Field 3', name: 'f3' },
{ fieldLabel: 'Field 4', name: 'f4' },
{ fieldLabel: 'Field 5', name: 'f5' }
]
}
]
}).show();
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:


Drop the code above into a subdirectory of the SDK examples directory.
Load into browser, and compare IE8 result with any other browser. (see attached screenshots)



The result that was expected:


The form fields should be flushed to the right.



The result that occurs instead:


The form fields are flushed to the left on IE8, and furthermore the child container jumps around when the containing Ext.Window is resized.


Screenshots:


attached


Debugging already done:


none


Possible fix:


not provided

Condor
3 Dec 2010, 8:11 AM
hbox items need 'width' or 'flex'. Your form container has neither.

nsolsen
3 Dec 2010, 8:25 AM
Ahh, yes, of course..! :">

This solves it. Sorry for the disturbance, and thanks for swift reply!