Column Layout manageOverflow

**pedrobaracho** · 13 Nov 2012 7:50 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.1a

Browser versions tested against:

Chrome 23
IE9.0 (no bug)
FF16
Opera 12

DOCTYPE tested against:

No DOCTYPE specified

Description:

I created a Ext.window.Window with two areas. An upper area with some fields in Column Layout and a lower area with another panel.
My window has fit layout.
Inside the window there is only one item: a form (for submitting and validation purposes)
The form is using Anchor layout and has 2 items: a container and a panel.
The container is using column layout, has fixed height and flexible width.
The panel has flexible width and height.
Because the container height is smaller than necessary, the Layout Manager reserves a space of 17px for the vertical scrollbar, even if I set autoScroll false.
Also, the browser does not render any scrollbar in that space, which leaves a blank space on the right, looking like a margin-right problem.
Setting: manageOverflow to 0, solves the problem.
Also, changing xtype from container to panel (without border, frame, etc.) solves the problem too.

Steps to reproduce the problem:

Run the attached code

The result that was expected:

No blank space
Aligned containers

The result that occurs instead:

Layout manager reserves a space of 17px for the vertical scrollbar that is not rendered by the browser, which looks like a margin-right problem for the end user.

Test Case:

Code:

<html><header>
<link rel="stylesheet" type="text/css" href="ext-4.1.1a/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="ext-4.1.1a/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
    Ext.create('Ext.window.Window', {
        title: 'Layout bug',
        width: 600,
        height: 600,
        layout: 'fit',
        border: false,
        items: [{
            xtype: 'form',
            bodyPadding: 13,
            frame: true,
            layout: 'anchor',
            items: [{
                xtype: 'container',
                layout: 'column',
                anchor: '100%',
                height: 200,
                defaults: {
                    labelAlign: 'top',
                    style: 'margin: 5px'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'field1',
                    columnWidth: .3
                },{
                    xtype: 'textfield',
                    fieldLabel: 'field2',
                    columnWidth: .4
                },{
                    xtype: 'textfield',
                    fieldLabel: 'field3',
                    columnWidth: .3
                },{
                    xtype: 'textfield',
                    fieldLabel: 'field4',
                    columnWidth: .3
                },{
                    xtype: 'textfield',
                    fieldLabel: 'field5',
                    columnWidth: .4
                },{
                    xtype: 'textfield',
                    fieldLabel: 'field6',
                    columnWidth: .3
                },{
                    xtype: 'textarea',
                    fieldLabel: 'field7',
                    columnWidth: 1,
                    height: 70
                }]
            },{
                xtype: 'panel',
                anchor: '100% -200',
                title: 'My grid Panel that expands vertically with the window'
            }]
        }],
        buttons: [{
            text: 'Ok'
        },{
            text: 'Cancel'
        }]
    }).show();
});
</script>
</header>
<body>
</body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

attached

screenshot.png

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7 Home Premium 64

**mitchellsimoens** · 13 Nov 2012 4:56 PM

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

Column Layout manageOverflow

Thread Tools

Search Thread

Display

Column Layout manageOverflow

Column Layout manageOverflow