IE7 scroll problem

[vladcd]

Hello everyone,

I have a small problem regarding the display of scroll bars on IE7.
The code for the test page is:

Ext.onReady(function(){
            var win = new Ext.Window({
                width: 300, 
                height : 300,
                layout : 'fit',
                items : [{
                    xtype : 'form',
                    layout : 'anchor',
                    items : [{
                        xtype : 'tabpanel',
                        anchor : '100% 100%',
                        bodyStyle : 'overflow:auto;',
                        enableTabScroll : true,
                        items : [{
                            title : 'Tab 1',
                            id : 'tab1'
                        }],
                        activeTab : 0
                    }]
                }]
            });
            win.show();
        });

After the window is displayed, I run from the Firebug Console(mozilla), or from the Script tab in Developer Tools(IE8), the following command:

Ext.getCmp('tab1').setHeight(500);

In IE8 and Mozilla, the tab will be resized to 500px in height, and the horizontal/vertical scroll bars will appear.

In IE7, the tab will be resized, but no scroll bars will appear. I don't know how much of an Ext problem this is, but considering you guys have extensive experience with browsers, I was hoping for a good hint for IE7.

Thanks a lot,
Vlad

[vladcd]

I've noticed that after modifying the height to 500, the scroll does appear, but instead of being on the inside of the component with

overflow : auto;

specified, it's on the outside of the overflowing component.

For this, I've modified the width of the child of the component with

overflow : auto;

from 284px to 265px. By doing this, the scroll will appear. However, it doesn't seem to function properly.

Any thoughts are welcomed.

Thanks a lot,
Vlad

[vladcd]

Hi,

so after trying a ton of different stuff, I managed to find a patch. Apparently, if I override the position:relative for the body of the panel, the scroll will display correctly on IE7. However, this is not a solution for my complex layout (seems that some issues with floating objects appear), but I would appreciate any insight to why the position:relative is causing so much trouble on IE7.

<style type="text/css">
.position-static{
    position : static !important;
    height : 500px !important;
}
</style>
<script>
    Ext.onReady(function(){
            var win = new Ext.Window({
                width: 300, 
                height : 300,
                layout : 'fit',
                items : [{
                    xtype : 'form',
                    layout : 'anchor',
                    items : [{
                        xtype : 'tabpanel',
                        anchor : '100% 100%',
                        bodyStyle : 'overflow:auto;',
                        enableTabScroll : true,
                        items : [{
                            title : 'Tab 1',
                            id : 'tab1',
                            html : 'Lorem ipsum...very long text',
                            bodyCssClass : 'position-static'
                        }],
                        activeTab : 0
                    }]
                }]
            });
            win.show();
        });
</script>

[Animal]

You've spent all this time overlooking a major point of the ExtJs layout system.

You do not manage the size of child Components of size managing layouts. The parent Container's layout (In this case, CardLayout) does.

You must not touch the size of "tab1". You must not make it position: static.

[vladcd]

Well, I agree with not making the position static. It doesn't help me a lot anyway, but I needed some way to eliminate the position : relative bit, and overriding it with the default value was the first thing that came to my mind.

About the height of tab1, I must say again this is a simplified example. In my code, I overrid the setSize of BoxComponent to take into account a minimum size. And this works very well in IE8 and Firefox, so I can't imagine why it shouldn't be the same in IE7.

Sticking to the example, I think I'll probably lose some more time trying to figure this one out.

In case I come up with something, I'll let you know.

Thanks a lot for your feedback,
Vlad

[hendricd]

@vladcd --
Start with some basics before you get too involved with custom styling:

items : [{
   xtype : 'tabpanel',
   anchor : '100% 100%',
   bodyStyle : 'overflow:auto;',
   enableTabScroll : true,
   defaults: { autoScroll :true },
   items : [{
       title : 'Tab 1',
       id : 'tab1',
       html : 'Lorem ipsum...very long text'
   }],
   activeTab : 0
}]

[vladcd]

Thanks for all your feedback.

I found the solution in the end.

Ext.onReady(function(){
    var win = new Ext.Window({
        width: 300, 
        height : 300,
        layout : 'fit',
        items : [{
            xtype : 'form',
            layout : 'anchor',
            items : [{
                xtype : 'tabpanel',
                anchor : '100% 100%',
                enableTabScroll : true,
                items : [{
                    title : 'Tab 1',
                    id : 'tab1',
                    autoScroll : true,
                    items : [{
                        xtype : 'panel',
                        html : 'Text',
                        height : 500
                    }]
                }],
                activeTab : 0
            }]
        }]
    });
    win.show();
});

Since the previous code seemed to lead nowhere, I just added an extra panel which is meant to do just that: provide the scroll bars and scroll the content correctly.