1 Reply Latest reply on Mar 31, 2008 5:54 PM by peterent

    How to create multi column Form??

    Pratap Reddy

      Hi...

      i need to create form with two columns...

      any idea how to do that??

      Thanks in Advance
        • 1. Re: How to create multi column Form??
          peterent Level 2
          Don't use <mx:Form> for that. Use <mx:Canvas> use advanced constraints. Think of the Canvas as having 4 wide columns. Column 1 contains the first set of labels. Column 2 has the input fields. Column 3 has the next set of labels and Column 4 has the other labels.

          If you are familiar with the top, left, bottom, and right constraints, advanced constraints takes this one step further.
          <mx:Canvas ...>
          <mx:constraintColumns>
          <mx:ConstraintColumn id="col1" />
          <mx:ConstraintColumn id="col2" />
          <mx:ConstraintColumn id="col3" />
          <mx:ConstraintColumn id="col4" />
          </mx:constraintColumns>

          Now add in your labels and input fields, attaching them to the columns:

          <mx:Label text="First Name:" right="col1:0" />
          <mx:TextInput id="firstName" left="col2:0" />
          <mx:Label text="Last Name:" right="col3:0" />
          <mx:TextInput id="lastName" left="col2:0" />
          ...

          Since I didn't give the ConstraintColumns a width, they will size to fit their contents. You may find they are a little too close however. But the magic of the advanced constraints is how easy it is to adjust everything by modifying the ConstraintColumns. For example, set the width property of the col3 ConstraintColumn until it gives enough space between it and col2.