Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: RC2 Container autoScroll minHeight problem in Chrome

    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
    28
      0  

    Default 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,409
    Vote Rating
    503
      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
    28
      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,409
    Vote Rating
    503
      0  

    Default

    Great, thanks...

    Scott.

  5. #5
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    28
      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,409
    Vote Rating
    503
      0  

    Default

    This has been reported as a bug.

    Regards,
    Scott.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      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.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      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'
            }]
        }]
    });
    Longtime Sencha engineer. Now surplus to requirements apparently...

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      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'
            }]
        }]
    });
    Longtime Sencha engineer. Now surplus to requirements apparently...

  10. #10
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    28
      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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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