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?