HTML/CSS Service

Changing the label text alignment in a FormItem container in Flex

Category: Flex Examples    |    4,577 views

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>

Share/Save/Bookmark

1 Star2 Stars

Tags: , ,

1 response so far!

Leave a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word