PDA

View Full Version : [SOLVED] Hbox Flex Reverses in IE



benmclendon
27 Apr 2009, 9:09 AM
With this code the left/right flex widths reverse in IE7 compared to FF3, e.g. I'm looking for a wider left side, narrower right side. I get that in F3 but in IE7 the left side is narrow and and the right side is wide.

Is anyone else experiencing this?



var mdWindow = new Ext.Window({
layout : 'vbox',
height : 600,
width : 900,
closable : false,
resizable : false,
plain : false,
border : false,
layoutConfig : {
align : 'stretch'
},
defaults : {
frame : false
},
items : [{
title : 'Concentrator',
flex : 1,
layout : 'hbox',
plain : true,
layoutConfig : {
align : 'stretch'
},
items : [{
flex : 4,
items : gridMaster
}, {
flex : 2,
items : editMasterPanel
}]
}, {
title : 'History',
flex : 1,
layout : 'hbox',
plain : true,
layoutConfig : {
align : 'stretch'
},
items : [{
flex : 4,
items : gridDetail
}, {
flex : 2,
items : editDetailPanel
}]
}]
});

Condor
27 Apr 2009, 11:23 AM
1. You are overnesting. Give gridMaster, editMasterPanel, gridDetail and editDetailPanel a flex config option and use them directly in the layout.
2. Give your panels an initial width (any width will do, e.g. width:0).

benmclendon
28 Apr 2009, 6:22 AM
Perfect! That resolves the flex reversal. Now, if the flex would calculate the same widths in IE and FF... The second panel (right side) renders a bit narrower in FF causing scroll bars.


var mdWindow = new Ext.Window({
layout : 'vbox',
height : 600,
width : 900,
closable : false,
resizable : false,
plain : false,
border : false,
layoutConfig : {
align : 'stretch'
},
defaults : {
frame : false
},
items : [{
title : 'Concentrator',
flex : 1,
layout : 'hbox',
layoutConfig : {
align : 'stretch'
},
items : [gridMaster, editMasterPanel]
}, {
title : 'History',
flex : 1,
layout : 'hbox',
layoutConfig : {
align : 'stretch'
},
items : [gridDetail, editDetailPanel]
}]
});
http://www.barneshc.com/images/ext/MDIE.png

http://www.barneshc.com/images/ext/MDFF.png

benmclendon
28 Apr 2009, 7:53 AM
Set the left side element to:
flex : 1

Set the right side element to:

flex : 0
Width : 300