Horizontal MX form or Vertical Spark Form Flex

Question

I have noticed two differences between spark and mx forms which are causing me some problems. It seems by default the mx forms are arranged to the label is above the form input item. In Spark they are arranged next to each other. Also the label in spark forms are bold by default.

For example MX code could be

<mx:Form width="100%">
    <mx:FormItem indicatorGap="0">
        <s:Label text="label1"/>
         <s:TextInput id="input1" width="180"/>
    </mx:FormItem>
</mx:Form>

For Spark it could be

<s:Form>
    <s:layout>
        <s:FormLayout gap="-10" paddingLeft="-10" paddingRight="-10"/>
    </s:layout>
    <s:FormItem label="label1">
        <s:TextInput id="input1" width="180"/>
    </s:FormItem>
</s:Form>

Now my problem is the look of each form.

The spark form's labels are bold. Ideally I want to be able to use a spark form and have it positioned both horizontally and vertically and not have a bold label. Is this possible?

This will remove me having both spark and mx forms in my application.

Alternatively is it possible to make mx forms position horizontally?

Thanks

Following the answer here is an example of a spark form positioned vertically

<s:FormItem>
    <s:Label text="label1" fontWeight="bold"/>
    <s:TextInput id="input1" />
</s:FormItem>

2DH 2DH · Accepted Answer · 2011-10-05T23:58:33

First of all mx:FormItem also displays its label in a horizontal manner if you define it properly as a FormItem property, not as a child of it.

<mx:FormItem label="Proper label">

Now for the rest of your question. Boldness of spark:FormItem label is defined as an inline style declaration so you can't do much about it beside defining your own skin for FormItem container. And that's also the way you can achieve your other requirement - verical label placement. Alternatively you can do what you've already practiced with mx:FormItem and define label as a child. Content group of spark:FormItem is laid out using VerticalLayout so it should work pretty much as you want it to.

Regards.

Horizontal MX form or Vertical Spark Form Flex

1 Answers