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
Hey Ray, if you add paddingLeft="5" to the VBox, does the red border show further left than the text?
The vbox already has paddingleft=10. Did you mean to add 5 more?
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.
Have you tried reducing the padding right? Just a thought.
@thebouv - wow, you are right. Is there anyway I can 'push' the text font over?
How about applying some negative margin to the labels? Something (in CSS) like:
label: margin-left: -5px;
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.
Well, this is Flex, so it shouldn't matter. ;) I tried it though - but it didn't work.
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>
I cannot duplicate the problem you are seeing, but if you want to indent the text of the text area, just add textIndent=2.
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.
@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.