hi team,

this might be the biggest bugfix i posted so far, since it will resolve quite a bunch of issues.
in the past i had several problems with rendering hidden items and width calculations, most were tabbed forms with deferredRender: false.

+ i had comboBoxes that were 17px (the width of the trigger) to wide
+ errorIcons displayed over the fieldLabel
+ sliders with the thumb always at zero

and many more issues. this all went down to the point, that the width-calculations returned 0 if rendered hidden. i used hideMode: offsets quite a lot because of this. the solution i found also works with the default display-mode.

so, here it is:

Code:
Ext.override(Ext.Element, {
    getWidth : function(contentWidth){
        var me = this,
        dom = me.dom,
        hidden = Ext.isIE && me.isStyle('display', 'none'),
        w = Math.max(dom.offsetWidth || parseInt(dom.style.width, 10), hidden ? 0 : dom.clientWidth) || 0;
				
        w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
        return w < 0 ? 0 : w;
    }
});
i had to write "Math" instead of "MATH", since i can not access the attribute with an override.

here is a small usecase, showing my sliderField usecase with normal hideMode:display.
tested in ff3.6, ie8 and chrome. the fix for getHeight should work the same way.

Code:
Ext.onReady(function(){

    Ext.override(Ext.Element, {
		getWidth : function(contentWidth){
			var me = this,
                dom = me.dom,
                hidden = Ext.isIE && me.isStyle('display', 'none'),
                w = Math.max(dom.offsetWidth || parseInt(dom.style.width, 10), hidden ? 0 : dom.clientWidth) || 0;
				
            w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
            return w < 0 ? 0 : w;
        }
	});

	new Ext.form.FormPanel({
		renderTo: document.body,
		width:600,
		height:250,
		layout:'fit',
		border:false,					
		labelWidth : 100,
		items : [{
			xtype: 'tabpanel',
			activeTab: 0,
			deferredRender: false,
			layoutOnTabChange: true,
			plain:true,
			defaults:{autoScroll: true},
			items:[{
					title: 'Tab 1',
					html: "My content was added during construction."
				},{
					title: 'Tab 2',
					layout: 'form',
					items: [{
						fieldLabel: 'Sliderfield',
						maxValue  : 500,
                                                minValue  : 0,
						value     : 250,
						width     : 200,
						xtype     : 'sliderfield'
					}]
				}
			]
		}]
	});
});

kind regards,
tobiu