Flex formitem label aligment oddity

apache-flex, forms

Solution

Bug or feature? The label of a `FormItem` is aligned with the baseline of the `FormItem`'s content. A picture says more than a thousand words, so I'll show you what happens:

So it turns out to be a feature (thanks for asking this question: I didn't know this myself until today).

In order to "fix" this feature, you'll have to create a custom skin: create a skin class by copying the original `spark.skins.spark.FormItemSkin`. Find the element called `labelDisplay`; it should look like this:

<s:Label id="labelDisplay"
         fontWeight="bold"
         left="labelCol:0" right="labelCol:5" 
         bottom="row1:10" baseline="row1:0"/>  

See that `baseline` attribute? That's what's causing the undesired behaviour. You can simply remove it; the label will then always align to the bottom. If you wish to align it to the vertical center, you could alter it like this:

<s:Label id="labelDisplay" fontWeight="bold" verticalAlign="middle"
         left="labelCol:0" right="labelCol:5" top="row1:10" bottom="row1:10"/>

Now all you need to do, is applying your custom skin to your FormItem:

<s:FormItem skinClass="my.custom.FormItemSkin">

Or in case of more frequent usage:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|FormItem.centeredLabel {
        skinClass: ClassReference("my.custom.FormItemSkin");
    }
</fx:Style>

<s:FormItem styleName="centeredLabel">

Problem

Original source