Flex Tip: Custom Component Not Lining Up With Label In Form Item?

Recently I was creating a set of in place editor custom components for our project at work and I noticed that when I placed them inside a FormItem that they didn’t line up with the label of the FormItem. I left it when I first noticed it as I didn’t have time to fix the issue but when I returned to it I had to do plenty of digging to figure out the problem. My custom component consisted of (in it’s default state) something like the following:

<mx:HBox verticalAlign="middle">
    <mx:Text id="textValue" text="{this.textValue}" ... />
</mx:HBox>

I was using the HBox as a wrapper as I wanted to be able to add other contents in there, such as and edit button and the actual editor and keep it all on one line.

Everything was working as expected, except for the fact that the FormItemlabel would not line up with the text in the textValue, I considered hacking it by adding some padding but decided to dig through the framework to figure out what was going on.

After lots of digging I found this in the FormItem:

if (labelObj)
{
    if (n > 0)
    {
	// Center label with first child
	child = IUIComponent(getChildAt(0));
	childBaseline = child.baselinePosition;
	if (!isNaN(childBaseline))
	    y += childBaseline - labelObj.baselinePosition;
    }

    // Set label size.
    // snip ...
}

So I did some investigating on my custom component and sure enough it didn’t have a baselinePosition, which didn’t make too much sense too me. So I started paring down the component until it centred with the label, it turned out that setting the verticalAlign property on the HBox was the cause of it not having a baselinePosition (I didn’t dig into the reason why this was so).

So the moral of this tale is if you find your custom component doesn’t line up with the label of a FormItem check your component has a baselinePosition.