Flex form layout - add first child vertically aligned with label - apache-flex

Question

In flex form layout
<mx:Form id="form">
<mx:FormItem label="horizontal:">
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
the output will be
horizontal 'test'
But my constraint is i want to align the textbox(first child of the form item ) vertically with the label. How can i do this ?Any inputs invited

Answer 1

You could override the form / formitem class to change the layout approach by overriding updateDisplayList method.
You could also try something like this:
<mx:Form id="form">
<mx:FormItem direction="vertical">
<mx:Label text="horizontal:"/>
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>

Answer 2

For Spark-Forms it works differently. Take a look at this very good description: https://opensource.adobe.com/wiki/display/flexsdk/Spark+Form
From the source above:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#stackedForm s|FormItem
{
skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");
}
</fx:Style>
<s:Form id="stackedForm">
<s:FormItem label="Address" sequenceLabel="1." required="true" >
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:helpContent>
<s:Label text="(ex. 123 Main Street)" baseline="24"/>
<s:Button label="?" width="30" baseline="24" x="120"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="City" sequenceLabel="2." required="true">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem label="State" sequenceLabel="3.">
<s:ComboBox dataProvider="{statesDP}" width="100%"/>
</s:FormItem>
<s:FormItem label="ZipCode" sequenceLabel="4." required="true">
<s:TextInput widthInChars="4" restrict="0123456789"/>
<s:helpContent>
<s:Label text="Will appear in your profile" left="0" right="0" baseline="24"/>
</s:helpContent>
</s:FormItem>
</s:Form>