Results 1 to 6 of 6

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

    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
      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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
      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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      0  

    Default

    Add a level of nesting.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
      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
    307
    Vote Rating
    1
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •