6 Replies Latest reply on Dec 22, 2010 9:52 AM by kevinklin

    Flex 4 form

    Zolotoj Level 3

      By default all formitems labels are aligned to the left and data fields are to the right. But if I wrap formitems with a VGroup then all data fields are shown right next to their labels. Is there a way to to keep the default layout?

       

      Thanks

        • 1. Re: Flex 4 form
          Shongrunden Adobe Employee

          Are your FormItems inside a Form container?  If so Form has a FormLayout which extends VerticalLayout, can you change properties on that rather than introducing a VGroup?

           

          See this thread for more details: http://forums.adobe.com/thread/747199

          • 2. Re: Flex 4 form
            Flex harUI Adobe Employee

            Why are you wrapping form items?

            • 3. Re: Flex 4 form
              Zolotoj Level 3

              I am not wrapping an each item, but rather a group of items to create a form with two columns.

              • 4. Re: Flex 4 form
                kevinklin Adobe Employee

                We currently don't support multi-column forms. Child elements of the Form must have a FormItemLayout to be aligned.

                 

                However, you could do something similar by wrapping FormItems inside of FormItems. Try something like this:

                 

                    <s:Form>
                        <s:FormItem label="hello">
                            <s:TextInput width="100%" />
                        </s:FormItem>
                        <s:FormItem label="check 1">
                            <s:layout>
                                <s:HorizontalLayout verticalAlign="baseline" />
                            </s:layout>
                
                            <s:TextInput />
                
                            <s:FormItem label="check 2">
                                <s:TextInput />
                            </s:FormItem>
                        </s:FormItem>
                    </s:Form>
                

                 

                The second FormItem has a TextInput as its first piece of content, but its second piece of content is another FormItem. One issue with this is that it will be very hard to align the second column vertically with any other form items.

                • 5. Re: Flex 4 form
                  Zolotoj Level 3

                  Here is what I am trying to do:

                  <form>

                       <hgroup>

                            <vgroup>

                                 <formitem>

                                 <formitem>

                            <vgroup>

                            <vgroup>

                                 <formitem>

                                 <formitem>

                            <vgroup>

                       <hgroup>

                  <form>

                   

                  it works but the items look very unprofessional.

                  form.png

                  • 6. Re: Flex 4 form
                    kevinklin Adobe Employee

                    FormItems must be direct child elements of Form to have their columns aligned. Since you have the Hgroups and Vgroups wrapping the form items, the columns won't be automatically aligned. See Shongrunden's link for more info on how spark form works.