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

&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> </code>

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 developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

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

Comments