[2.3.0] IE7 Accordion bug

[chh]

Ext version tested:

• Ext 2.3.0

Adapter used:

• ext

css used:

• only default ext-all.css

Browser versions tested against:

• IE7

Operating System:

• WinXP Pro

Description:

• In IE7 the accordion layout hides panels below the active one.
• See screenshot. The first one is how it looks in version 2.2.1 and the second one is how it looks in 2.3.0. The problem is only in IE7, all other browsers get it right.
  
  The screenshots are from the examples\layout\accordion.html contained in the Ext SDK.
  

Screenshot or Video:

• attached

[twarberg]

Done a little bit of debugging and discovered it has to do with this fix (from the change log):

Ext.core.Element

• Fix getWidth/getHeight issue.

Looks like IE7 has a bug in the 'clientWidth' dom property. I've made an quick and dirty fix, that seems to work (but might break something else!). Simply reverting to how Ext 2.2.1 did, if IE7:

Ext.override(Ext.Element, {
          getHeight : function(contentHeight){
                var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight) || 0;
                if(Ext.isIE7) {
        		h = this.dom.offsetHeight || 0;
        	}
                h = contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
                return h < 0 ? 0 : h;
            },


            getWidth : function(contentWidth){
                var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth) || 0;
        	if(Ext.isIE7) {
        		    w = this.dom.offsetWidth || 0;
        	}
                w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
                return w < 0 ? 0 : w;
            }
        });

/Tim

[Dumbledore]

nice solution! But this behaviour is not only on IE7!

I have the same problem here with IE6. And your solution works...

Thanks,
Dumbledore

[TizianoF]

I've noticed the same problem. Is there a patch from ext js?

[Sean Connelly]

Same problem here!

Any news on a fix?

[evant]

Using the SVN version I'm not seeing this happen. Can anyone confirm?

[letssurf]

I'm seeing the same problem. The fix also worked for me.

Also might I suggest only applying the override if it is IE.

if(Ext.isIE7) {
    Ext.override(Ext.Element, {
      getHeight : function(contentHeight){
            var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight) || 0;
            h = this.dom.offsetHeight || 0;
            h = contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
            return h < 0 ? 0 : h;
        },


        getWidth : function(contentWidth){
            var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth) || 0;
            w = this.dom.offsetWidth || 0;
            w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
            return w < 0 ? 0 : w;
        }
    });
}

[TizianoF]

Any chance to get a bug fix release for those that have paid for the license?

[TizianoF]

For instance this problem affects also IE6, I've just tested it.