How to align the formItems?

Question

I'm trying to create a form, but i am having issues aligning the formItems.

This is mx:Form namespace. (xmlns:mx="http://www.adobe.com/2006/mxml")

does anyone have any suggestions on how to correct this. any help would be greatly appreciated.

     <mx:VBox paddingLeft="0" height="100%">
        <form:Form width="100%"
                   textAlign="left">

            <mx:VBox>

                <mx:HBox id="snapShotSelect">

                    <form:FormItem label="My Label Here"
                                       includeInLayout="{model.formItemVisible}"
                                       visible="{model.formItemVisible}"/>

                    <mx:VBox>
                        <form:FormItem includeInLayout="{model.formItemVisible}"
                                           visible="{model.formItemVisible}">
                            <components:SageTextInput textAlign="left"/>

                        </form:FormItem>

                        <form:FormItem label=""
                                           visible="{model.formItemVisible}"
                                           includeInLayout="{model.formItemVisible}"/>

                        <form:FormItem visible="{model.formItemVisible}"
                                           includeInLayout="{model.formItemVisible}">
                            <components:SageList id="snaps"
                                                 allowMultipleSelection="false"
                                                 width="200"
                                                 rowCount="5"/>

                        </form:FormItem>
                    </mx:VBox>
                </mx:HBox>

                <mx:HBox>
                    <form:FormItem label="My Label Here"
                                       width="100%"
                                       visible="{model.formItemVisible}"
                                       includeInLayout="{model.formItemVisible}"/>

                    <form:FormItem label=""
                                       width="100%">
                        <components:SageComboBox dataProvider="{model.generations}"
                                                 textAlign="left"
                                                 enabled="{model.generations.length > 0}"/>

                    </form:FormItem>
                </mx:HBox>

                <mx:HBox id="radioSelectGroup">
                    <form:FormItem label="">
                        <components:SageRadioButtonGroup id="rbGroup"
                                                         groupId="rbGroup"
                                                         labelPlacement="right"/>
                    </form:FormItem>
                </mx:HBox>

                <mx:HBox id="radioNew">
                    <form:FormItem>
                        <components:SageRadioButton id="radioCopy" value="{model.RADIO_CREATE}"
                                                    group="{rbGroup}"
                                                    labelPlacement="right"
                                                    width="250"
                                                    label="Radio Button 1" />
                    </form:FormItem>

                    <form:FormItem>
                        <components:SageTextInput textAlign="left"
                                                  enabled="{rbGroup.selectedValue == model.RADIO_CREATE}"/>
                    </form:FormItem>
                </mx:HBox>

                <mx:HBox id="radioExisting">

                    <form:FormItem>
                        <components:SageRadioButton id="radioNoCopy" value="{model.RADIO_USE_EXISTING}"
                                                    group="{rbGroup}"
                                                    labelPlacement="right"
                                                    width="250"
                                                    label="Radio Button 2"/>
                    </form:FormItem>

                    <mx:VBox>
                        <form:FormItem label=""
                                           paddingBottom="0">
                            <components:SageTextInput textAlign="left"
                                                      enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
                        </form:FormItem>
                        <form:FormItem label=""
                                           indentationLevel="0"
                                           paddingTop="0">
                            <components:SageList allowMultipleSelection="false"
                                                 width="200"
                                                 rowCount="5"
                                                 enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
                        </form:FormItem>
                    </mx:VBox>

                </mx:HBox>

            </mx:VBox>


    </form:Form>
</mx:VBox>

It Looks like this at the moment.

Current

But i want it to look like this

Desired

What is this form namespace? Are you using mx Form, Spark Form or some third party component? It's impossible to tell from the code. — RIAstar
Apologies, its an mx:Form - xmlns:mx="adobe.com/2006/mxml" Edited the question. — Peter
I suggest removing the extra "VBox/HBox" components and just using the Form container. Then see where you stand. If you really want/need VBox / HBox they should be inside a FormItem. In many cases, you can use the mx:FormItem direction property to control layout. — JeffryHouser
@Peter Why do you need put the radiobutton in the left side of the `formitem´? Is this necessary? Please check this link and tell me if will be useful LINK. — Gaston Flores
You have to do what @Reboog711 said. The Form and FormItem components work together to align everything. But since you have inserted other components in between them they can't align properly. — Sunil D.

Bhalchandra Bhalchandra · Accepted Answer · 2014-01-01T10:59:27

Use the following code : Please adjust the width of spacer according to your alignment requirements. Also Dont miss out mentioning the width of every HBox and VBox inside the formItem. Here, I am using all mx components.

    <mx:Form>
        <mx:FormItem width="100%">
            <mx:VBox id="ContainerVBox" width="100%">
                <mx:HBox width="100%">
                    <mx:Label id="label1" text="my label here"/>
                    <mx:Spacer width="10%"/>
                    <mx:TextInput id="textInput1" text="This is text input 1"/>
                </mx:HBox>
                    <mx:TextInput id="textInput2" text="This is text input 2"/> 
            </mx:VBox>


        </mx:FormItem>

        <mx:FormItem width="100%">
            <mx:HBox width="100%">
                <mx:Label id="label1" text="my label here"/>
                <mx:Spacer width="10%"/>
                <mx:ComboBox id="myComboBox"/>
            </mx:HBox>
        </mx:FormItem>

        <mx:FormItem width="100%">
            <mx:HBox width="100%">
                <mx:RadioButton id="myRadioButton"/>
                <mx:Text text="Radio Button 1"/>
                <mx:Spacer width="10%"/>
                <mx:TextInput id="textInput3"/>
            </mx:HBox>
        </mx:FormItem>

        <mx:FormItem width="100%">
            <mx:VBox width="100%">
                <mx:HBox width="100%">
                    <mx:RadioButton id="myRadioButton"/>
                    <mx:Text text="Radio Button 2"/>
                    <mx:Spacer width="10%"/>
                    <mx:TextInput id="textInput4"/>
                </mx:HBox>
                <mx:TextInput id="textInput5" text="This is text input 5"/>     
            </mx:VBox>

        </mx:FormItem>

    </mx:Form>
</mx:VBox>

How to align the formItems?

1 Answers