[Solved]Left align form fields

[yuiman]

Does anyone know how I can left align the form fields on a standard form? Here's the code I have. The attached pictures show my current results vs. what I'd like. Note that I'd also like the small label instructions underneath a couple of the fields to left align as well.

Here's my code:

    var fs = new Ext.FormPanel({
        standardSubmit: true,
        frame: true,
        collapsible: true,
        title:'Search Providers',
        labelAlign: 'right',
        labelWidth: 130,
        width:500,
        waitMsgTarget: true,

        // reusable eror reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader(),

        items: [
            new Ext.form.FieldSet({
                title: 'Search Criteria',
                autoHeight: true,
                defaultType: 'textfield',
                bodyStyle: Ext.isIE ? 'padding-top:5px;' : '',
                width: '90%',
                items: [{
                    fieldLabel: 'Last Name',
					width: 200,
                    name: 'lastName'
                },{
                    xtype:'label',
                    html: '<small>Minimum of 2 characters</small><br><br>'
                },{
                    fieldLabel: 'Group Practice Name',
					width: 200,
                    name: 'groupName'
                },{
                    xtype:'label',
                    html: '<small>Minimum of 2 characters</small><br><br>'
                },
				    new Ext.form.ComboBox({
                        fieldLabel: 'Specialty',
                        id:'specialty',
                        hiddenName:'specialtyCode',
                        store: specialtyStore,
                        valueField:'Name',
                        displayField:'Name',
                        typeAhead: true,
                        editable: false,
                        resizable: true,
                        width: 250,
                        triggerAction: 'all',
                        emptyText:'Select a specialty...',
                        selectOnFocus:true,
                        forceSelection: true
                    })
				,{
                    fieldLabel: 'City',
					width: 200,
                    name: 'city'
                },{
                    fieldLabel: 'Zip Code',
					width: 50,
                    name: 'zipCode'
                },{
                    xtype: 'radiogroup',
                    fieldLabel: 'Search Distance',
                    xcolumns: 2,
                    items: [
                        {boxLabel: '5 miles', name: 'rbDistance', inputValue: 5},
                        {boxLabel: '10 miles', name: 'rbDistance', inputValue: 10},
                        {boxLabel: '20 miles', name: 'rbDistance', inputValue: 20},
                        {boxLabel: '50 miles', name: 'rbDistance', inputValue: 50}
                    ]
                },{
                    xtype:'label',
                    html: '<small>City or Zip Code + Mileage required for distance search</small><br><br>'
                }                    
                ]
            })
        ],

        buttons: [{
            text: 'Search',
            handler: function(){
                if (fs.getForm().isValid()) {
                    fs.getForm().submit({
                        waitMsg:'Searching...'
                    });
                }else{
                    Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
                }
            }
        }]
    });

[walldorff]

Your code renders fine with me. I think the form container has a style text-align:center;

[yuiman]

Thanks ... I changed my placeholder div tag by adding style="text-align:left", which solved the problem.

Appreciate the quick reply ...

- Joe