Changing the text alignment in a Flex ComboBox control

The following example shows how you can change the alignment of text within a ComboBox control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/20/changing-the-text-alignment-in-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function comboBox_change():void {
                comboBox.setStyle("textAlign", comboBox.selectedLabel);
            }
        ]]>
    </mx:Script>

    <mx:Label text="textAlign:" />
    <mx:ComboBox id="comboBox"
            width="250"
            change="comboBox_change();">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="left" />
                <mx:Object label="center" />
                <mx:Object label="right" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

As you can see in the previous example, not only is the combo box label’s alignment changed, but also the values in the combo box dropdown list. If you want to align these two separately, you can set the dropdownStyleName style to override the alignment in the dropdown list, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/20/changing-the-text-alignment-in-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function comboBox_change():void {
                comboBox.setStyle("textAlign", comboBox.selectedLabel);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        .myLeftAlign {
            textAlign: left;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Label text="textAlign:" />
    <mx:ComboBox id="comboBox"
            dropdownStyleName="myLeftAlign"
            width="250"
            change="comboBox_change();">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="left" />
                <mx:Object label="center" />
                <mx:Object label="right" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: textAlign