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.

    [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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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 Forum Manager
    ________________
    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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 Forum Manager
    ________________
    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
    266
    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