Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
    gubarez is on a distinguished road

      0  

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

    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:

    Code:
    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
                    }]
    
    
                }]
            }));
        }
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,392
    Vote Rating
    1100
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

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

    Code:
    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
            }]
    
    
        }]
    }));
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
    gubarez is on a distinguished road

      0  

    Default

    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?

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,392
    Vote Rating
    1100
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Add a level of nesting.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
    gubarez is on a distinguished road

      0  

    Default

    10q, I have managed to make it

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

  6. #6
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    276
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default

    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
    No longer a Newbie

Thread Participants: 2