1 Attachment(s)
Accordion/ treepanel autoscroll issue in IE10, IE9 (& IE8 Compatability)
REQUIRED INFORMATION
Ext version tested:
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:
Operating System:
Similar issue on select box also
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
