CODEWITHSUNDEEP
apache-flexforms
user454535
user454535

Reputation: 1

Flex form layout - add first child vertically aligned with label

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

Upvotes: 0

Views: 1569

Answers (2)

user880625
user880625

Reputation: 246

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>

Upvotes: 0

JeffryHouser
JeffryHouser

Reputation: 39408

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>

Upvotes: 1

Related Questions