BorderLayout with autoScroll

[skirtle]

A change in behaviour from 4.0.7 to 4.1.0-beta-1, albeit using a slightly odd combination of layout options.

The following code has a vertical scrollbar in 4.1.0-beta-1, it didn't previously. The scrollbar is disabled and over the top of my panel contents. Arguably autoScroll: true doesn't make sense in this case; in my original code that setting is inherited from a superclass.

Ext.create('Ext.panel.Panel', {
    autoScroll: true,
    height: 400,
    layout: 'border',
    renderTo: Ext.getBody(),
    title: 'Outer',
    width: 400,
    items: [
        {
            region: 'west',
            title: 'West',
            width: 200
        }, {
            region: 'center',
            title: 'Center'
        }
    ]
});

[mitchellsimoens]

What browser you seeing this? I'm not seeing this in Chrome 16 and FF9.

[skirtle]

Now you mention it, it does seem to be browser-specific.

I could reproduce it using Chrome 16 (Windows and Ubuntu) and Safari 5.1 (Windows). Non-Webkit browsers were all fine.

Not sure what could account for it not happening for you in Chrome. I tried varying the doctype but it happened no matter what I tried.

[dongryphon]

I can reproduce it on Chrome 14. It appears to be a bug in Chrome because if I do this:

Ext.fly('panel-1001-body').setStyle('overflow', 'hidden');

setTimeout(function () {
    Ext.fly('panel-1001-body').setStyle('overflow', 'auto');
}, 0); 

In the debugger, the scrollbar goes away. So, I tried this and it also seems to correct the behavior:

    Ext.create('Ext.panel.Panel', {
        autoScroll: true,
        height: 400,
        layout: 'border',
        renderTo: Ext.getBody(),
        title: 'Outer',
        width: 400,
        listeners: {
            resize: function (panel) {
                panel.body.setStyle('overflow', 'hidden');
                setTimeout(function () {
                    panel.body.setStyle('overflow', 'auto');
                }, 0);
            }
        },
        items: [
            {
                region: 'west',
                title: 'West',
                width: 200
            }, {
                region: 'center',
                title: 'Center'
            }
        ]
    }); 

Very strange. I've never seen this in other places. Have you?

[skirtle]

I don't recall having seen this problem before. I only got it in one place and it's easy enough for me to turn off autoScroll. I'm not worried about my own app, more concerned it may be the tip of an iceberg lurking somewhere in the 4.1 layouts.

Another variation on the theme you tried...

If you set the panel body overflow to scroll you'll get scrollbars, as expected. If you then set it back to auto they'll stick around. If instead you go to hidden then auto you don't get scrollbars. It's the classic UI problem of needing scrollbars because you have scrollbars.

The original issue is more mysterious though. I haven't been able to induce that unneeded scrollbar via console styling hackery yet.