[2.2] FieldSet width/height incorrect in FF3 on Mac

[tierneyja]

Fieldsets within a form do not consistently calculate width and height.

This issue is limited to firefox 3 on Mac (no issue on FF3 for PC).
I am using Ext 2.2, and version 3.01 of FF on Mac OSX 10.5.4. The issue and examples below involve opening an Ext.Window inside an app that is using Ext.ViewPort.

This issue does not occur on these other tested browsers:
FF 2.0.0.16 on Mac & 2.0.0.16, 3.0.1 on PC
IE 6, 7
Safari 3.1.2 on Mac & 3.1.1 on PC
Opera 9.27 on Mac & PC

I created the functions below, to help see the issue. Just have some JS run bugExample() in Ext.ViewPort to duplicate the issue for yourself. If you click the 'Create FieldSet' button a number of times you will see that every x number of fieldsets one will be much wider and higher than the others. I have played around with a fixed height and autoheight as well, but they do not fix the height issue. This behavior isn't exactly random. It should produce the issue for the same fieldset each time. However, each change you make to the window, form, fieldset definition, etc. will change when the issue occurs. Even adding a 3rd window button will change the behavior. I have not seen changes to my application (outside of the Window) affect the behavior.

These example functions create one pre-defined fieldset, and a button to add more. If you open the window 20 times or so, you will see that even the pre-defined fieldset (1st one) will cause an issue one of the times. It is easier to test with the button, but I set this up to show that the root cause isn't because I am adding the fieldset dynamically.

While this test does not show it, I have also see issues with combo dropdown lists, where the lists TOP and LEFT values are too large ('randomly' - but not really random, same as above) and the dropdown list just looks like a blue panel because the list is off to the bottom left somewhere.

Here are the functions. To test add a button to some application or to something with Ext.ViewPort that runs bugExample(). Then click the 'Add FieldSet' button until you see the issue.



function bugExample() {
var win = Ext.getCmp('BugExample');
if (!win) { //check to see if window already exists
win = new Ext.Window({
id: 'BugExample',
layout: 'card',
activeItem: 0,
//layout: 'form',
autoScroll: true,
width: 650,
height: 600,
closeAction: 'close',
title: 'FF3 on Mac Bug??',
bbar: [
'->',
{
xtype: 'button',
text: 'Create Fieldset',
tooltip: 'Create FieldSet.',
handler: function(button){
var fp = Ext.getCmp('formExample');
createFSExample(fp);
}
},
'-',
{
xtype: 'button',
text: 'Close',
tooltip: 'Click to close window.',
handler: function(button){
win.close();
}
}],
items: [{
xtype: 'form',
title: 'Example for FF3 on Mac',
id: 'formExample',
width: 620,
height: 540,
border: false,
aubems: [{
xtype: 'fieldset',
width: 612
//,height: 50
//,autoHeight:true
}]
}]
});
win.show();
} else {
win.show();
}
};

function createFSExample(fp) {
var fs = new Ext.form.FieldSet({
width: 612
//,height: 50
//,autoHeight:true
});
fp.add(fs);

fp.doLayout();
};


Hope this helps, sorry that I haven't made it far enough to offer sample code to fix it. Looking at the DOM only shows that one set of DIVs has an incorrect width and height, but I haven't look at the code that calculates width and height to see the underlying issue. My suspicion is that the problem lies with FF3 on Mac itself and not Ext and I am not sure if Ext can be changed to correct this behavior.

Thanks,
Jim