PDA

View Full Version : ColumnLayout in IE8



ShatyUT
16 Mar 2010, 7:21 AM
I am trying to use a ColumnLayout in a FormPanel to display 2 FieldSets next to each other. I want to have a gap between the two fieldsets so I wrap each fieldset with another panel so that I can set the BodyStyle param. These wrapper panels seem to cause the columns to not to take up the full expected width.

Form Code:


var checklistForm = new Ext.form.FormPanel({
layout: 'column',
border: false,
defaults: {
columnWidth: .5
,border: false
},
items: [{
bodyStyle: 'padding-right: 5px',
items: [{
xtype: 'fieldset',
title: 'Tab Details',
html: 'column 1'
}]
},{
bodyStyle: 'padding-left: 5px',
items: [{
xtype: 'fieldset',
title: 'Question Details',
html: 'column 2'
}]
}]
});


I am placing this code into existing HTML so I can not start with a ViewPort component. This code looks perfect in FireFox and IE7 but not in IE8. If I take out the wrapper panels, the columns span the entire width but they don't look quite right (the title starts at the top left corner without a gap) and I can not specify a padding gap between them.

Has anyone else seen this? Is there something I'm missing?