Accordion/ treepanel autoscroll issue in IE9 (& IE8 Compatability)

**dee1** · 17 Jul 2012 8:15 PM

REQUIRED INFORMATION

Ext version tested:

Ext 3.4.0

Browser versions tested against:

Firefox 13.0.1
Chrome 20.0.1132
IE 9.0.8112

Description: IE9

In IE9, Mouseover of the tree panel nodes cause the accordion panel to unexpectedly grow vertically.
Eventually the lower accordion panels disappear off the screen
This does not occur in Chrome/ Firefox

Description: IE9 (using IE8 Compatibility)

IE8 compatibility mode results in an an unexpected vertical scroll bar

Steps to reproduce the problem:

Run the example code below in IE9
Mouseover the tree panel node
Observe the height of the accordion panel as it grows in response to mouseover

The result that was expected:

The accordion panel height should not change

The result that occurs instead:

The accordion panel height unexpectedly grows
Eventually the lower accordion panels disappear off the screen
An unexpected vertical scroll bar can also be seen in IE8 compatability mode (see attached image)

Test Case:

Code:

   <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>

</head>
<body>


<script type="text/javascript">

Ext.onReady(function() {

    var treePanel1 = new Ext.tree.TreePanel({
        layout: 'fit',
        rootVisible : false,
        autoScroll : true,
        title:'Title 1',
        root : {
            children : [{
                text : 'test test test test test test test test test test test test test test ',
                leaf : true,
                checked : false
            },{
                text : 'test test test test test test test test test test test test test test ',
                leaf : true,
                checked : false
            }]
        }
    })
    var treePanel2 = new Ext.tree.TreePanel({
        layout: 'fit',
        rootVisible : false,
        autoScroll : true,
        title:'Title 2',
        root : {
            children : [{
                text : 'test test test test test test test test test test test test test test ',
                leaf : true,
                checked : false
            },{
                text : 'test test test test test test test test test test test test test test ',
                leaf : true,
                checked : false
            }]
        }
    })

    var accordionLayout = new Ext.Panel({
                layoutConfig : {
                    fill : false
                },
                layout : 'accordion',
                items : [treePanel1,treePanel2]
            });

    

    var borderLayout = new Ext.Panel({
                layout : 'border',
                items : [{
                            layout : 'fit',
                            width : 250,
                            region : 'west',
                            items : [accordionLayout]
                        }, {
                            region : 'center',
                            items : [{
                                        html : 'test'
                                    }]
                        }]
            });

    var win = new Ext.Viewport({
                title : 'Layout Window',
                layout : 'fit',
                items : [borderLayout]
            });

    win.show(this);
});


</script>

</body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

Attached image: AccordionPanelScrollBarsIE9.jpg
Image displays Chrome, Firefox, IE9, IE9 (with IE8 compatibility)

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7 (32)

**mitchellsimoens** · 18 Jul 2012 5:39 AM

Thanks for the report.

**smartgk** · 24 Sep 2012 1:06 AM

I have a selectbox with horizontal scroll. On hover (mouse over) of the selectable item list, the height is growing by one row height, on every onmouseenter. This is reproducible at all times on IE 9.0.8112.16421

I believe this would be similar issue. How would I get notified on any updates for this?

Thanks

**dee1** · 12 Apr 2013 5:41 PM

Thanks for the 3.4.1.1 IE10 release - unfortunately its introduced a new bug for IE10.

For IE9:
3.4.1.1 doesn't solve this bug (same as above).

For IE10:
The bug (discussed above) didn't happen with 3.4.0 but now with 3.4.1.1 a new bug seems to be introduced with a 3.4.1.1 vertical scroll bar that shouldn't be there.

If anyone can give some direction on where to start fixing these bugs, your help would be very welcomed.

Accordion/ treepanel autoscroll issue in IE9 (& IE8 Compatability)

Thread Tools

Search Thread

Display

Accordion/ treepanel autoscroll issue in IE10, IE9 (& IE8 Compatability)

Accordion/ treepanel autoscroll issue in IE10, IE9 (& IE8 Compatability)

Similar issue on select box also

Similar issue on select box also

3.4.1.1 Release

3.4.1.1 Release