FormItem’s have a bad layout.

In Flex, there’s unfortunately no easy way to make this layout work:

<form item’s label>

<form item control>

So if you, like me, have a layout that requires a prompt (something like “your email”) to sit directly above a form item (say a text input), you’re going to have some trouble.

You might say, well, why not just give the form item no label, or an empty label, and put a “Label” control on top of it, like this:

<vbox>

<Label text=”your email”>

<FormItem label=”">

<TextInput>

</FormItem>

</VBox>

Great idea! Unfortunately, this won’t give the layout you desire because Flex still allocates some space to the form item’s empty label.  Your “Label” control will be somewhere around 3 pixels to the left of your TextInput.  Awesome.

Does anyone have a good elegant solution for this that doesn’t involve any of the following?:

a.) re-writing FormItem

b.) using an absolute layout

c.) shifting the Label control to the right

I’ll update this post if I find one, but in my frustrated fury I wanted to get the question out there.  It seems like this sort of thing happens to me a lot with Flex….if you’re not working very soundly within the Adobe prescribed box for how their components should be used, you’re going to be jumping through hoops.  It’s stuff like this that consistently make me worried about estimating how long it’s going to take to complete any part of a project – if things work in the way they seem they should, it shouldn’t take long, but who knows what weird restrictions Adobe has on the object I want to use?