Question for Readers: Flex alignment with textarea controls

This post is more than 2 years old.

Here is an odd one for you. Consider the following Flex code:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left">
&lt;mx:VBox paddingLeft="10" paddingRight="10" width="80%"&gt;
	
	&lt;mx:Label text="First Label"  /&gt;
	&lt;mx:TextArea borderColor="#ff0000" borderThickness="3"/&gt;
	&lt;mx:Label text="Second Label" /&gt;

&lt;/mx:VBox&gt;

</mx:Application>

You would expect 3 items to show up, left aligned, in a VBox, and you get that of course, but the textarea is very slightly more to the left than the two labels. Check out this screen shot where I placed another window directly above the left edge of the text:

Notice the red border is very slightly smaller than the other ones. If I remove the borderColor and set borderThickness to 0, it is still there:

It almost seems as if Flex is aligning by the text of the TextArea control. In other words, when I typed in there it seemed as if that was the 'line' Flex used to line up all 3 controls, as opposed to the 'chrome' of the TextArea.

So am I seeing things, or is that what really is happening? And if so, is there where to align it by the chrome, not the text?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Kevin Schmidt posted on 2/23/2009 at 11:02 PM

Hey Ray, if you add paddingLeft="5" to the VBox, does the red border show further left than the text?

Comment 2 by Raymond Camden posted on 2/23/2009 at 11:06 PM

The vbox already has paddingleft=10. Did you mean to add 5 more?

Comment 3 by thebouv posted on 2/23/2009 at 11:21 PM

As I tweeted to you, I think the TA is aligned fine. The labels are slightly to the right actually, probably due to font issues.

http://thebouv.com/files/fl...

That is with a border on the VBox, no padding.

Comment 4 by Jim Summer posted on 2/23/2009 at 11:28 PM

Have you tried reducing the padding right? Just a thought.

Comment 5 by Raymond Camden posted on 2/24/2009 at 12:36 AM

@thebouv - wow, you are right. Is there anyway I can 'push' the text font over?

Comment 6 by Brian posted on 2/24/2009 at 12:58 AM

How about applying some negative margin to the labels? Something (in CSS) like:

label: margin-left: -5px;

Comment 7 by Brian posted on 2/24/2009 at 1:01 AM

Of course, you'll probably want to make sure that IE, Moz, and Opera play well with the margin push...They are notoriously finicky about pixel adjustments.

Comment 8 by Raymond Camden posted on 2/24/2009 at 1:02 AM

Well, this is Flex, so it shouldn't matter. ;) I tried it though - but it didn't work.

Comment 9 by Brian posted on 2/24/2009 at 1:45 AM

Probably because in CSS a Flex label doesn't really exist...

How about this? I wish I could test it, but we have no Flex loaded here...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left">

<mx:Style>
Label { margin-left: -5px; }
</mx:Style>

<mx:VBox paddingLeft="10" paddingRight="10" width="80%">

<mx:Label text="First Label" />
<mx:TextArea borderColor="#ff0000" borderThickness="3"/>
<mx:Label text="Second Label" />

</mx:VBox>

</mx:Application>

Comment 10 by Steve W posted on 2/24/2009 at 4:24 AM

I cannot duplicate the problem you are seeing, but if you want to indent the text of the text area, just add textIndent=2.

Comment 11 by Steve W posted on 2/24/2009 at 4:29 AM

I guess I should finish my thought before hitting Post. The attribute 'textIndent' only indents the first line, while paddingLeft, as a textArea attribute, moves all lines left.

Comment 12 by Raymond Camden posted on 2/26/2009 at 2:34 AM

@Brian: margin-left does nothing for me. :( I added another item (setting color to red) and it did apply the color - just not the margin.

As it stands - folks - don't worry too much about this. The designer decided to change the UI of the thing in general. Still though - kinda interesting.