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

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

Ext 3.3.0
Ext 3.3.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

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

Operating System:

Windows 7


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:

<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' }
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.



Debugging already done:


Possible fix:

not provided

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

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

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