Search

Custom Search
11
Jun
08

Changing the label text alignment in a FormItem container in Flex

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.

<strong>Full code after the jump.</strong>

<?xml version=”1.0″ encoding=”utf-8″?>

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

Another Great story?

Get Adobe Flash playerPlugin by wpburn.com wordpress themes