Flex FormItem layout in nested component - apache-flex

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?

Answer 1

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.