RC2 Container autoScroll minHeight problem in Chrome

[ykey]

I was hoping that RC2 would fix my layout issues but it has not. I am having a problem with autoScroll behavior and minHeight in Chrome 17.

When I minimize my container past the minHeight size scrollbars appear as expected but resizing back does not remove them. Also horizontal scroll bars appear incorrectly.

Here is the best example I could show. Resize the browser window to bring up the scroll bars, then maximize the window so they go away. Except that they do not go away as they should.

I do not seem to have this problem in IE8 or FF 10 but I do get unnecessary horizontal scrollbars.

Ext.create('Ext.container.Viewport', {    
    layout: 'fit',
    items: [ 
        {
            xtype: 'container',
            layout: 'card',                       
            autoScroll: true,
             items: [
                {
                    xtype: 'container',
                    minHeight: 400,
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'component',
                            flex: 1,
                            html: 'Info 1'
                        },
                        {
                            xtype: 'component',
                            flex: 1,
                            html: 'Info 2'
                        },
                        {
                            xtype: 'component',
                            flex: 1,
                            html: 'Info 3'
                        }
                    ]


                }
            ]                    
        }
    ]
});

[scottmartin]

Can I get you to send a screen to make sure we are looking at the same thing?

Thanks,
Scott.

[ykey]

Can I get you to send a screen to make sure we are looking at the same thing?

Thanks,
Scott.

How is this?

http://imgur.com/a/onMtk

[scottmartin]

Great, thanks...

Scott.

[ykey]

Hey Scott can you respond with an update when you get some more information on this one? Is it a bug or can I just change something in my configuration to get it to behave properly?

Thanks.

[scottmartin]

This has been reported as a bug.

Regards,
Scott.

[Animal]

Using non-overnested layouts, I do not see any problems with the latest code.

Ext.create('Ext.container.Viewport', {    
    layout: 'fit',
    autoScroll: true,
    items: [{
        xtype: 'container',
        minHeight: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'component',
            flex: 1,
            html: 'Info 1',
            style: 'background-color: yellow'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 2',
            style: 'background-color: red'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 3',
            style: 'background-color: blue'
        }]
    }]
});

If I open the debugger to make the browser viewport height less than 400, then it scrolls the three panels, each approx 133px high.

[Animal]

I do see the horiz scrollbar though, so I'd suggest this:

Ext.create('Ext.container.Viewport', {    
    layout: 'anchor',
    items: [{
        xtype: 'container',
        autoScroll: true,
        width: '100%',
        minHeight: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'component',
            flex: 1,
            html: 'Info 1',
            style: 'background-color: yellow'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 2',
            style: 'background-color: red'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 3',
            style: 'background-color: blue'
        }]
    }]
});

[Animal]

Or, if you are targeting modet browsers:

Ext.create('Ext.container.Viewport', {    
    layout: 'fit',
    overflowY: 'auto',
    items: [{
        xtype: 'container',
        minHeight: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'component',
            flex: 1,
            html: 'Info 1',
            style: 'background-color: yellow'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 2',
            style: 'background-color: red'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'Info 3',
            style: 'background-color: blue'
        }]
    }]
});

[ykey]

Thanks Animal, I will try out some of these suggestions.

The example was stripped down but still real world. I do not think it was over-nested, my application uses a card layout to hide and show different application screens. I removed the header, toolbar, and footer from the viewport to simplify the example. Realistically there are dozens of cards in the card layout.