[B3] Scroller doesn't behave properly when flex and height is set.

[gubarez]

Seems that the scroller doesn't know the proper height of the element when flex and custom height is set. Doesn't matter if the value is set in percentage or pixels. Also, the bug occurs when when flex is not set and height is set only with a percentage value.


Test case:

Ext.application({
    name: 'MyApp',
    viewport: {
        autoMaximize: true
    },


    launch: function() {


        Ext.Viewport.add(Ext.create('Ext.Panel',{
            layout: 'card',
            
            items: [
            {
                xtype: 'toolbar',
                title: 'title',
                docked: 'top'
            },
            {
                xtype: 'panel',
                layout: 'vbox',
                scrollable: true,
                height: '200%',
                items: [{
                    xtype: 'panel',
                    html: 'item1',
                    style: 'background-color: black;',
                    flex: 2
                },
                {
                    xtype: 'panel',
                    html: 'item2',
                    style: 'background-color: red;',
                    flex: 3
                },
                {
                    xtype: 'panel',
                    html: 'item3',
                    style: 'background-color: green;',
                    flex: 3
                }]


            }]
        }));
    }
});

[mitchellsimoens]

Using card layout, the children should fit to the size of the container. Therefore your code isn't meant to work while this will:

Ext.Viewport.add(Ext.create('Ext.Panel',{
    layout: 'card',

    items: [
    {
        xtype: 'toolbar',
        title: 'title',
        docked: 'top'
    },
    {
        xtype: 'panel',
        scrollable: true,
        items: [{
            xtype: 'panel',
            html: 'item1',
            style: 'background-color: black;',
            height : 500
        },
        {
            xtype: 'panel',
            html: 'item2',
            style: 'background-color: red;',
            height : 400
        },
        {
            xtype: 'panel',
            html: 'item3',
            style: 'background-color: green;',
            height : 600
        }]


    }]
}));

[gubarez]

Actually, the children fit perfectly into the container... the problem occurs when scrolling - the scroller behaves like the container has the height of its parent, however it is bigger... the container is a vbox, not a card... The father of the container has card layout.
If this configuration is wrong, how I should make it to use the flex property?

[mitchellsimoens]

Add a level of nesting.

[gubarez]

10q, I have managed to make it

the head one should be VBOX and the rest Default... Now it works perfectly

[nak1]

gubarez,

Could you post your final fix, I think I've got a similar problem which only shows up in iPad 2/4.3.3