Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member nsolsen's Avatar
    Join Date
    Mar 2010
    Posts
    23
    Vote Rating
    0
    nsolsen is on a distinguished road

      0  

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


    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
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    hbox items need 'width' or 'flex'. Your form container has neither.

  3. #3
    Ext JS Premium Member nsolsen's Avatar
    Join Date
    Mar 2010
    Posts
    23
    Vote Rating
    0
    nsolsen is on a distinguished road

      0  

    Default


    Ahh, yes, of course..!

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

Similar Threads

  1. Replies: 10
    Last Post: 17 May 2010, 10:12 AM
  2. [CLOSED][3.??] CORE: event mouse coordinates bug in IE8
    By j_g_design in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 16 Aug 2009, 11:53 AM
  3. [OPEN] [CLOSED][3.0rc2] IE8 / FF - Some bug
    By peacock in forum Ext 3.x: Bugs
    Replies: 11
    Last Post: 4 Jun 2009, 5:42 AM
  4. Replies: 4
    Last Post: 23 Apr 2009, 11:17 PM
  5. [2.2.1][CLOSED] IE8 alignment bug
    By mpanati in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 23 Apr 2009, 8:06 AM

Thread Participants: 1