Horizontally aligning items in a FormItem container in Flex

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.

6 thoughts on “Horizontally aligning items in a FormItem container in Flex

  1. 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. 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. I’m interested in aligning the LABELS to the left or above the form field. Have you found any solutions for this?

  4. 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. 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;
    }
    

Comments are closed.