[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:

Code:

<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!

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

Thread Tools

Search Thread

Display

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

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

Similar Threads

[CLOSED] HBox does not redraw when nested inside a panel in IE8

[CLOSED][3.??] CORE: event mouse coordinates bug in IE8

[OPEN] [CLOSED][3.0rc2] IE8 / FF - Some bug

[2.2+]FormLayout,AnchorLayout do not account for margins when sizing child items

[2.2.1][CLOSED] IE8 alignment bug