Archive

Archive for the ‘ExtJS’ Category

IE7 overflow issue, while working with ExtJS

10/11/2009 1 comment

I’ll start by saying that I found this bug while working with ExtJS. It’s worth noting because it was very frustrating to deal with, and also, I could not find an actual bug explanation.

The simplified test case code for this would be:

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%',
                autoScroll : true,
                items : [ {
                    title : 'Tab 1',
                    id : 'tab1',
                    html : 'Really complex content goes here'
                } ],
                activeTab : 0
           } ]
       } ]
}); win.show(); });

This shows a window, containinga tab panel, with only one tab and some text in it. In order to observe the strange behavior, after the page displays, try setting the height of the tab to 500px.

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

If you run this from Firebug’s console, or from IE8’s developer tools script console, you will notice that scroll bars will appear in an instant. However, if you set IE8 to function on IE7 Browser Mode and IE7 Document Standards, and then run the same command, the overflow will appear not to function. In fact, it seems that IE7, instead of adding the scrollbars on the inside of the overflowed container (as it usually does), it adds them on the outside of the contained div. This is way they are not visible. However, even if they were visible, they wouldn’t work.

The generated HTML structure which causes this problem can be simplified like this:

<div style="overflow: auto; width: 282px; height: 238px;">
    <div style="width: 282px; height: 500px; overflow:hidden; position:relative;">
        Really complex content goes here
    </div>
</div>

So, even if you will notice the scrollbars are visible, they will not function in IE7. After trying to remove different stuff to see what’s broken, I noticed it’s got something to do with the position:relative attribute. Even if this seems like a sufficiently easy fix, it didn’t work on my complex layout.

So, without finding an actual solution, I settled for this workaround:

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%',
                items : [ {
                    title : 'Tab 1',
                    autoScroll : true,
                    items : [{
                        xtype : 'panel',
                        html : 'Really complex content goes here',
                        height : 500
                    }]
                } ],
                activeTab : 0
            } ]
        } ]
    });
    win.show();
});

So instead of trying to make the tab panel scroll its body, I added an intermediary object which does only that: overflow : auto; Its content is correctly scrolled in Firefox, IE8 and IE7.

So far, this is the best I could come up with, and I’m happy that at least it works.

Later edit:

Seems like the solution was simpler than that: all I had to do was to specify position:relative for the element with overflow:auto. A very good explanation can be found here 

Later Edit: 15th July 2014 – it appears the link I mentioned is not available any more. The solution is still valid, but a detailed explanation will be hard to find.

Advertisements
Categories: ExtJS, IE bugs