Having trouble aligning the form items in Flex?
I have seen people using very complex layout to achieve what Flex provides by default.
If I ask you to create a form like the following, will you start thinking about the HBoxes and VBoxes that you will have to add to align the controls properly? Have a look:
Well if your answer is No for my question then you are right. Because one doesn’t have to manually align a form in flex. Just use the form container and flex will take care of the aligning
<mx:Form>
<mx:FormHeading label=”Please Register!”/>
<mx:FormItem label=”User Name”>
<mx:TextInput id=”userNameInput”/>
</mx:FormItem>
<mx:FormItem label=”Password”>
<mx:TextInput id=”passwordInput”/>
</mx:FormItem>
<mx:FormItem label=”Re-enter Password”>
<mx:TextInput id=”rePasswordInput”/>
</mx:FormItem>
<mx:FormItem label=”Email”>
<mx:TextInput id=”emailInput”/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label=”Submit”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
Note that in the above code, to align the labels of the text inputs, the label property of the FormItem is used. This results in the Labels being right aligned and the form field (inputs and button) being left aligned.
Now, if you still want the alignment of the Labels of the Form to be changed, you can do that by changing the labelStyleName property of the FormItem.
Adding the following style will result in left aligned labels for the form:
<mx:Style>
FormItem {
labelStyleName: labelStyle;
}
.labelStyle{
textAlign: left;
}
</mx:Style>
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
I like the default behaviour but problem arise when you have some custom requirements for forms. Something like:
1. Your label text and required icon should be together on left side. (not possible I have tried many times, do you have any suggestion ?)
2. If I need to make a form divided into multiple forms i.e. a very long form, not possible using Form, you have to customize.
have a look at the following link where someone develop custom component for multicolumn form. I know default form in one column and can’t be used for big form.
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=9644
Hi,
A couple of questions:
Is there an easy way to position the labels above the form fields with the code structure you’ve used here?
In HTML labels and form fields can be tied together semantically by making a reference to the ID attribute of the form field element using the FOR attribute of the label element. When this is done the label can be clicked and the associated field gets focus. How could this be achieved in Flex 3?
Any advice for a two (or more) column form? The form container doesn’t appear to support that.