Question for Readers: Flex alignment with textarea controls

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">

<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>

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?

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.