The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function comboBox_change(evt:ListEvent):void {
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
}
]]>
</mx:Script>
<mx:Style>
FormItem {
labelStyleName: customTextAlignLabel;
}
.customTextAlignLabel {
textAlign: left;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="textAlign:">
<mx:ComboBox id="comboBox"
dataProvider="[left,center,right]"
change="comboBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Form>
<mx:FormItem label="Button">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ButtonBar">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="CheckBox">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ColorPicker">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ComboBox">
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.



Thanks for sharing, I love your blog.
hi also like your blog , u can also visit this blog http://flexsamples.blogspot.com
thanks
St.
After reading this example, I see that a Form tag can be placed inside ApplicationControlBar tag. I learnt one more way of populating a ComboBox with the way you have used the dataProvider property.
Hi and thanks for the tip!
Can the alignment of the FormHeading component be changed also and is there an easy way to position the labels above the form fields with the mxml used here? If not, I can’t possibly understand why this kind of basic but yet very critical thing haven’t been taken care of in Flex 3 :(
In HTML labels and form fields can be tied together semantically by making a reference to the ID attribute of the form field element using the FOR attribute of the label element. When this is done the label can be clicked and the associated field gets focus. How could this be achieved in Flex 3?
Pirkka Rannikko,
Can you please file an enhancement request for both issues at http://bugs.adobe.com/flex/ ?
Thanks,
Peter