Flex FormItem layout in nested component

Question

I have a fairly straightforward Flex layout question.

Is there anyway to get FormItem's contained within a nested container to follow the alignment of the FormItem's in in the parent form container?

For example:

<mx:Form>

  <mx:FormItem label="This is a long label" id="formItem1">
   <mx:HBox>
     <mx:TextInput />
   </mx:HBox>
  </mx:FormItem>

  <s:BorderContainer>
    <mx:FormItem label="ShrtLbl" id="formItem2">
     <mx:HBox>
       <mx:TextInput />
     </mx:HBox>
    </mx:FormItem>  
  </s:BorderContainer>

</mx:Form>

In this case I would like the label for both formItem1 and formItem2 to have to the same width which would be the case if defined as follows:

<mx:Form>

  <mx:FormItem label="This is a long label" id="formItem1">
   <mx:HBox>
     <mx:TextInput />
   </mx:HBox>
  </mx:FormItem>

   <mx:FormItem label="ShrtLbl" id="formItem2">
     <mx:HBox>
       <mx:TextInput />
     </mx:HBox>
   </mx:FormItem>  

</mx:Form>

Any thoughts?

Wait, so which SDK are you using? 3 or 4? Spark or MX? Make it all Spark components and you'll have a much easier time skinning the form items. — J_A_X

tchurchward tchurchward · Accepted Answer · 2011-07-20T03:00:11

The Spark Form Skin uses the spark.layouts.FormLayout to control the layout of its children.

From the FormLayout source:

The FormLayout class defines the default layout for Spark Form skins. FormLayout provides a vertical layout for the child FormItem containers in the Form.

If any of the child containers uses a FormItemLayout, FormLayout will align the ConstraintColumns of each child.

Therefore the Layout does not look at any nested children of the form.

I would recommend creating your own custom form layout to handle your case.

oops, I see you're using the mx:FormItem not the s:FormItem. I would recommend using the spark variants.

Furthermore, there is no need to have an mx:HBox (or s:HGroup) inside a FormItem.

Flex FormItem layout in nested component

1 Answers