PDA

View Full Version : Fieldset in IE problems



pdchapin
8 Jul 2010, 10:58 AM
I have some code that I developed with Firefox, where it works fine, but when I try in on IE the display is messed up. Usually when something like this happens I find that there is some parameter that IE insist on having, but I haven't been able to figure out what it it.


mapApp.userGroupMembershipForm = new Ext.FormPanel({
frame:true,
labelWidth:80,
autoHeight:true,
buttonAlign:'center',
defaultType:'radio',
monitorValid:true,
id:"gmf",
items: [{
layout: 'column',
border: true,
xtype: 'fieldset',
autoHeight: true,
defaults: {
columnWidth: '.33',
border: true
},
items: [{
border:false,
xtype: 'fieldset',
title: CHANGE_DEFAULT,
labelWidth:20,
autoHeight: true,
width:150,
defaultType: 'radio',
items: defaultItemArray
},{
xtype: 'fieldset',
border:false,
labelWidth:20,
width:150,
title: JOIN_GROUP,
autoHeight: true,
defaultType: 'radio',
items: joinItemArray
},{
xtype: 'fieldset',
border:false,
labelWidth:20,
width:150,
title: DROP_GROUP,
autoHeight: true,
defaultType: 'radio',
items: dropItemArray
}]
}]
}); The different results look like this,
21356 21357
I actually like the stacked headers better - it makes the columns easier to distinguish - but I prefer not having the first radio button on top of the text.

Stju
8 Jul 2010, 3:23 PM
Have a look with firebug in column header, and find relating css class, then try to tweak and see what happens in IE..

pdchapin
15 Jul 2010, 1:02 PM
It appears to come down to the line

<span class="x-fieldset-header-text" id="ext-gen129">

but I can't find anything about x-fieldset-header-text would cause a browser specific difference. This is the span that actually contains the text. This is contained in two other tags

<fieldset class=" x-fieldset x-fieldset-noborder x-form-label-left x-column" id="ext-comp-1020" style="width: 130px;">
<legend class="x-fieldset-header x-fieldset-header-noborder x-unselectable" id="ext-gen126" style="mozuserselect: none; khtmluserselect: none;" unselectable="on">

In Firefox, all three are the correct width, but with IE, the fieldset is right, the span is wrong, and it doesn't seem to know what to do with the legend.

I've discovered that if I turn the borders on, the problem goes away, but I don't want the borders.

j_mmontero
15 Jul 2010, 1:21 PM
One quick solution:



var userGroupMembershipForm = new Ext.FormPanel({
frame :true,
labelWidth :80,
width : 500,
autoHeight :true,
buttonAlign :'center',
defaultType :'radio',
monitorValid :true,
id:"gmf",
items: [{
layout : 'column',
border : true,
xtype : 'fieldset',
autoHeight : true,
defaults: {
columnWidth: '.33',
border: true,
bodyStyle: { paddingTop: '35px'}
},

items: [{
border :false,
xtype : 'fieldset',
title : 'Change default group',
labelWidth:20,
autoHeight: true,
width :150,
defaultType: 'radio',

items: [{
boxLabel : 'test'
},{
boxLabel: 'test 2'
},{
boxLabel: 'test 3'
}]
},{
xtype : 'fieldset',
border :false,
labelWidth:20,
width :150,
title : 'or join new group',
autoHeight: true,
defaultType: 'radio',
items: [{ boxLabel : 'test'}]
},{
xtype : 'fieldset',
border:false,
labelWidth:20,
width:150,
title: 'or Drop a group',
autoHeight: true,
defaultType: 'radio',
items: [{ boxLabel : 'test'},{ boxLabel: 'test 2'},{ boxLabel: 'test 3'}]
}]
}]
});

userGroupMembershipForm.render('div1');

just add the below line :
bodyStyle: { paddingTop: '35px'}
Tested on IE7

Condor
21 Jul 2010, 3:03 AM
Try:

new Ext.FormPanel({
frame: true,
labelWidth: 80,
autoHeight: true,
buttonAlign: 'center',
defaultType: 'radio',
monitorValid: true,
id: "gmf",
items: {
xtype: 'fieldset',
style: Ext.isIE ? 'margin-bottom:0;padding-top:24px;' : '', // <- fix IE display problem for fieldsets without title
autoHeight: true,
width: 500, // <- column layout container needs a width when using columnWidth
layout: 'column',
defaults: {
columnWidth: .33,
xtype: 'fieldset',
border: false,
labelWidth: 20,
autoHeight: true,
defaultType: 'radio',
defaults: {
anchor: '0' // <- explitly size the radios
}
},
items: [{
title: 'Change default group',
items: [{
boxLabel: 'Default Group'
},
{
boxLabel: 'test'
},
{
boxLabel: 'test 2'
},
{
boxLabel: 'test 3'
}]
},
{
title: 'or Join new group',
items: {
boxLabel: 'api group'
}
},
{
title: 'or Drop a group',
items: [{
boxLabel: 'test'
},
{
boxLabel: 'test 2'
},
{
boxLabel: 'test 3'
}]
}]
}
})
ps. Any reason you are using labelWidth:20 instead of hideLabels:true?