Horizontally aligning items in a FormItem container in Flex at Flex Examples

The following example shows how you can align form items horizontally by setting the horizontalAlign style to “left”, “center”, or “right” on the Flex FormItem container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/18/horizontally-aligning-form-items-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Form {
            backgroundColor: white;
            backgroundAlpha: 0.2;
            borderColor: black;
            borderStyle: solid;
            borderThickness: 1;
        }

        FormItem {
            labelStyleName: myFormItemLabelStyleName;
        }

        .myFormItemLabelStyleName {
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Form id="form" width="300">
        <mx:FormItem label="left:"
                horizontalAlign="left"
                width="100%">
            <mx:Image source="@Embed('assets/air_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="center:"
                horizontalAlign="center"
                width="100%">
            <mx:Image source="@Embed('assets/fl_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="right:"
                horizontalAlign="right"
                width="100%">
            <mx:Image source="@Embed('assets/fx_appicon-tn.gif')" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

March 2008
M	T	W	T	F	S	S
« Feb		Apr »
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

March 2008

« Feb

Apr »

6 Responses to “Horizontally aligning items in a FormItem container in Flex”

Feed for this Entry View blog reactions

1 Raul Riera Mar 19th, 2008 at 6:57 am

Have you tried working with the Schedule Framework of flexlib? some examples of that would really be helpful :) (I know I shouldnt be asking, you are doing a great job)
2 peterd Mar 19th, 2008 at 10:34 am

Raul,

I haven’t looked at it yet. I’m still busy going through the core Flex/Player API and finding lots of interesting things. Maybe in the future I’ll expand out and do some SWFObject posts and stuff from FlexLib and the Yahoo! Maps Flex API.

Peter
3 Christian May 9th, 2008 at 12:03 pm

I’m interested in aligning the LABELS to the left or above the form field. Have you found any solutions for this?
4 peterd May 9th, 2008 at 4:19 pm

Christian,

I haven’t found a solution for that. The workaround is pretty simple as you can manually add a Label control within the FormItem container.

Feel free to log a bug at http://bugs.adobe.com/flex/ (if you file a bug and post the bug number here and I’ll vote for it). You can also ask on the FlexCoders list and see if anybody has a solution (you may be able to extend the FormItem container and change the default layout).

Peter
5 Francisco Villa Jr. Oct 9th, 2008 at 3:11 pm
This is how you align the formitem labels to the left.

Set the formitem’s “labelStyleName” attribute to some style such as “myFormLabelStyle”. Then, define the style as such:
```
.myFormLabelStyle
{
	textAlign: left;
}
```
6 peterd Oct 9th, 2008 at 3:33 pm

Francisco Villa Jr.,

Good tip! I have a post on that at “Changing the label text alignment in a FormItem container in Flex”.

Peter