[CLOSED-102][3.0.0] Ext.ux.GroupTabPanel layout with Firefox

[rlegend]

Hi,

When using Zoom In on Firefox the layout in the Ext.ux.GroupTabPanel breaks. This is occuring both on the demo page and my own implementation of it. This doesn't occur when using Safari or Chromium(for OSX).

Firefox 3.5.1
OSX 10.5.7
ExtJS 3.0

This is a screen shot after hitting Zoom on Firefox one time.




I've successfully 'hacked' it to make it work with the following change, but the tabs and body no longer line up perfectly.

This starts at line 265 of Ext.ux.GroupTabPanel, added code is in red.

    onGroupBeforeTabChange: function(group, newTab, oldTab){
        if(group !== this.activeGroup || newTab !== oldTab) {
            this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
        } 
        
        this.expandGroup(this.getGroupEl(group));
        this.setActiveGroup(group);
    },
    
    getFrameHeight: function(){
        var h = this.el.getFrameWidth('tb');
        h += (this.tbar ? this.tbar.getHeight() : 0) +
        (this.bbar ? this.bbar.getHeight() : 0);
        
        return h;
    },
    
    adjustBodyWidth: function(w){
        return w - this.tabWidth - 2;
    }
});

Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);

A screen shot with my 'fix'



I love using this UX and I'd hate to have to can it because of this bug.
Thanks in advance.

Ron

[mjlecomte]

The page gets quite jumpy when you resize the browser width also.

[rlegend]

The following css changes seem to fix it without having to use the 'hack' I posted above.

Starting at Line 20 of GroupTab.css

.x-tab-panel-left .x-grouptabs-bwrap {
/*    float: right;*/
    position: relative;
}
.x-tab-panel-right .x-grouptabs-bwrap {
/*    float: left;*/
    position: relative;
}

[gbohmer@tacticaltrust.com]

I am experiencing this problem as well with the Ext 3.2.1 GroupTab example. The CSS trick seems to fix FF 3.6, but breaks the same way in IE8. Unfortunately, this makes the component pretty unusable in a production scenario. Any additional input on this one?

[Jamie Avins]

I believe we had a lot of difficulty in finding a good solution to this and it's why its in the UX area of the library. The thread should be closed as it was decided there wasn't much we could do with text zooming at this point in time.

[dubnuts]

I realise this thread is closed. However I thought I would update just to share my experience with the fixes posted above, incase it helps anyone out.

After applying the CSS fix, it solved it all the major browsers, with the exception of IE6 (yes I know its old, but we have some customers STILL using it). The fix completely broke IE6.

IE6 does not support the browser zoom feature, so the solution was to conditionally include the fix if the browser is not IE6.

With this implemented, the fix works on the following:

IE9
IE8
IE7
IE6
Safari (OSX)
Safari 5 (WIN)
Firefox 13 (OSX)
Firefox 12 (Win)
Opera 11 (Win)