Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5861 in a recent build.
  1. #1
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default RC2 Container autoScroll minHeight problem in Chrome

    RC2 Container autoScroll minHeight problem in Chrome


    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.

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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Thanks,
    Scott.

  3. #3
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Great, thanks...

    Scott.

  5. #5
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    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.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This has been reported as a bug.

    Regards,
    Scott.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

    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.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Or, if you are targeting modet browsers:

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

  10. #10
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    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.

Thread Participants: 3

Tags for this Thread