FormItem’s have a bad layout.

September 14, 2007 at 11:54 am 9 comments

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:


<Label text=”your email”>

<FormItem label=””>




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?


Entry filed under: flex.

picnik is amazing This Blog Dying Soon

9 Comments Add your own

  • 1. Justin  |  September 17, 2007 at 6:01 am

    RJ — Within FormItem, set your indicatorGap to 0 pixels. That should eliminate the gap between the form item’s label and all of its child components.

  • 2. Justin  |  September 17, 2007 at 10:03 am

    Oops, forgot to post the code itself:

  • 3. Justin  |  September 17, 2007 at 10:04 am

    Oops, forgot to post the code itself:

  • 4. Ryan  |  September 26, 2007 at 8:06 am

    The indicatorGap does work, but not if you are using the required attribute of the formItem. There is an enhancement request in the Flex JIRA for this feature. Agree, much harder than it has to be.

  • 5. RJ  |  September 26, 2007 at 10:06 am

    wow, I guess I hadn’t tried with “required”. What a pain….

  • 6. Joe  |  September 4, 2008 at 9:14 am

    How about using the indicatorGap=”0″ trick and, instead of using the required attribute, use a mx:StringValidator control with minLength=”1″ to handle your form validation?

  • 7. pix  |  September 12, 2008 at 5:33 am

    Hi, the last paragraph is exactly the same I would write it 🙂 I am solving problems like this again and again – I like flex, but this is really bothering me, I spend a lot of time with this “customization” problems.

  • 8. Prabh  |  May 30, 2011 at 12:00 pm

    Came across this post while dealing with this exact issue. Yes, its painful no doubt. I kinda used a lame workaround. I have a Form control and within that i specified a Label with the text i want. Then i declare a formitem with label width = 0 and indicatorgap = 0. The alignment is pretty good and it works well. Till we get an actual fix, try this if it works for you too.


  • 9. Any  |  May 11, 2012 at 5:14 am

    you can done using some delay after compnet creation complete.
    like below:
    setTimeout(function():void{ label_text.x = 25; },150);


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

September 2007
« Aug   Oct »

Recent Posts

%d bloggers like this: