[OPEN-1087] FormPanel labelAlign does not override in fieldset

[zachext]

Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3 (firebug 1.3.0.10 installed)


Operating System:

Win 7


Description:

When specifying a labelAlign of top for a FormPanel and then specifying a labelAlign of left for a contained fieldset, the css class .x-form-label-top applies to labels of fieldset items.


Test Case:



Ext.onReady(function () {

new Ext.form.FormPanel({
renderTo: Ext.getBody(),
labelAlign:'top',
items: [
{fieldLabel:'field 1', xtype:'textfield'},

{ xtype:'fieldset', labelAlign:'left', title:'fieldset',
items: [{ fieldLabel: 'field 2', xtype: 'textfield' }]
}
]
})

})


Possible Solution:

Add the following css to ext-all.css




.x-form-label-left .x-form-item label.x-form-item-label {
width:auto;
float:left;
clear:left;
display:block;
position:relative;
}

.x-form-label-left .x-form-element {
padding-top:0px;
}

.x-form-label-left .x-form-item {
padding-top:0px;
}

[samsonasu]

I have the same problem, Ext 3.2.1. Your CSS didn't quite work, I needed one more level of specification on the top rule, and I also needed a little bit of margin (4px) on the label so it aligned to the center of the text field it was next to.



.x-form-label-left .x-fieldset-body .x-form-item label.x-form-item-label {
width:auto;
float:left;
clear:left;
display:block;
position:relative;
margin-top: 4px;
}


edit: This was in linux on FF4 and Google chrome. The css patch fixes both browsers.