Results 1 to 2 of 2

Thread: White gap above FormPanel submit button in Firefox 3.5

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2007

    Default White gap above FormPanel submit button in Firefox 3.5

    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;
    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?
    Attached Images Attached Images
    Ext-4.2.1 / Windows 7 SP1 / Firefox 24 / Firebug 1.12.2

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    items: [{}], == One Panel as the child item. That's what you are seeing.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts