IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display

**yudindi** · 12 Apr 2013 1:46 AM

REQUIRED INFORMATION

Ext version tested:

Ext 3.4.0
Ext 3.4.1.1

Browser versions tested against:

IE8 - doesn't work
Chrome 26.0.14 - works

Description:

IE 8: Container (form layotu) nested in a FormPanel does not calculate correct height for a nested composite field but sets 0 height instead.

Steps to reproduce the problem:

Create FormPanel {defaults: {hidden: true}} with a Container {layout:'form'} and a nested CompositeField with two fields
Show the form and change the visibility at runtime

The result that was expected:

Composite field is visible with a correct height

The result that occurs instead:

Composite field has 0 height

Test Case:

Code:

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='http://cdn.sencha.io/ext-3.4.0/adapter/ext/ext-base.js'></script>
  <script type="text/javascript" src="http://cdn.sencha.io/ext-3.4.0/ext-all-debug.js"></script>
  <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script type='text/javascript'>//<![CDATA[ 
Ext.onReady(function() {
var simple = new Ext.FormPanel({
        labelWidth: 75,
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {anchor: '90%', hidden: 'true'},
        defaultType: 'textfield',


        items: [{
                fieldLabel: 'Outer One',
            }, {
                xtype: 'container',
                layout: 'form',
                anchor: '100%',
                items: [{
                    xtype: 'compositefield',
                    fieldLabel: 'Inner One',
                    anchor: '90%',
                    items: [{
                        xtype: 'textfield',
                        flex: 1
                    }, { 
                        xtype: 'button',
                        text: 'add'
                    }]
                },{
                    xtype: 'textfield',
                    fieldLabel: 'Inner Two',
                    anchor: '90%'
                }]
            }, { fieldLabel: 'Outer Two' }
        ],


        buttons: [{ text: 'CLICK',
            listeners: {
                'click': function() { 
                    Ext.each(simple.items.items, function(item) { item.setVisible(true); }); 
                }
            }
        }]
    });


    simple.render(document.body);
});//]]>  
</script>
</head>
<body></body></html>

HELPFUL INFORMATION

Screenshot or Video:

composite.png

Debugging already done:

Apparently, FormLayout does not call box.component.setSize() since calculated height is undefined and calculated width didn't change since last calculation. When calculating in Chrome the width does change couple of px, that causes box.component.setSize(), and consequent adjustmentPass on the FormLayout.

Possible fix:

set the height manually on show

Additional CSS used:

only default ext-all.css

Operating System:

Win 7

**mitchellsimoens** · 15 Apr 2013 7:55 AM

Thanks for the report! I have opened a bug in our bug tracker.

IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display

Thread Tools

Search Thread

Display

IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display

IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display