Horizontally aligning items in a FormItem container in Flex

By Peter deHaan On March 18, 2008 · 6 Comments

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.

Tagged with: horizontalAlign

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

Raul Riera says:

March 19, 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)

Reply
peterd says:

March 19, 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

Reply
Christian says:

May 9, 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?

Reply
peterd says:

May 9, 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

Reply
Francisco Villa Jr. says:

October 9, 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;
}
```
Reply
peterd says:

October 9, 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

Reply