PDA

View Full Version : White gap above FormPanel submit button in Firefox 3.5



borg
22 Sep 2009, 12:28 PM
frame: true, border: true


var simple = new Ext.FormPanel({
labelWidth: 150,
buttonAlign: 'center',
url: 'index.php',
renderTo: 'form',
title: 'CFT Registration',
frame: true,
border: true,
bodyStyle: 'padding: 5px 5px 0',
width: 530,
items: [{}],
buttons: [{
text: 'Submit',
formBind: true,
scope: this,
handler: submit
}]
});

No gap in IE8. To fix it I create a style after the ext-all.css file loads, see below.


<link rel="stylesheet" type="text/css" href="../ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.0.0/ext-all.js"></script>

<style type="text/css">
/* remove the gap above the submit button */
.x-form-item {
margin-bottom: 0px;
padding-bottom: 4px;
}
</style>

If a fieldset appears as the last item, I have to put the below in to prevent the gap.


{
xtype: 'box',
autoEl: {
cn: ' '
},
cls: 'x-form-item',
width: '100%'
}

Also noticed that even just a {} instead of the xtype: 'box' and all that works to fix it. There are more than one item so I'm not sure why adding another blank object would change anything

What is causing this gap and is there a better way to fix it?

Animal
22 Sep 2009, 1:08 PM
items: [{}], == One Panel as the child item. That's what you are seeing.