Aligning a label in a Button control in Flex

The following example shows how you can align the text label within a Flex Button control by setting the textAlign style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/21/aligning-a-label-in-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                button.setStyle("textAlign", evt.item.label);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="left" />
        <mx:Object label="center" />
        <mx:Object label="right" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        itemClick="toggleButtonBar_itemClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Button id="button"
            label="Button"
            textAlign="center"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the textAlign style in an external .CSS file, or <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    Button {
        textAlign: right;
    }
</mx:Style>

<mx:Button id="button"
        label="Button"
        width="200" />

Or, you can set the textAlign style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            button.setStyle("textAlign", "right");
        }
    ]]>
</mx:Script>

<mx:Button id="button"
        label="Button"
        width="200"
        initialize="init();" />

Oops, looks like I’ve blogged this before. For another (and better) example, see “Changing a Button control’s text alignment and label placement”.

0 thoughts on “Aligning a label in a Button control in Flex

  1. Hello Peter,
    I tried alot to grab your contact email id, but i nowhere found your email id. This is not the place where i can post my query but can you please send me your email id on my given email id?
    I do have few queries regarding RSS Feeds of your examples and your permission to publish them.

    Thanks,

    Kind Regards,

    Mayur Patil

  2. Mayur Patil,

    You’re free to use the RSS feeds however you want. In fact, the entire blog is released under a Creative Commons License and you’re welcome to use the blog’s content however you want, as long as you do the attribution and share alike thing (see “Creative Commons License” link in footer for details).

    Peter

  3. Hello!

    i need some help..
    what i’v to do..is somethig like this…

    for (i=5;i=12;i++)
    {
    ["btn"+string(i)].setStyle(“icon”, this["icon" + iconNum]);
    }
    }

    so in my kode…y had 20 buttons whit the ID’s LIKe but1, but2 but3,…but20

    i jus…can’t find the way..to manipulate that propety… tk’s..! :S

  4. NESSLY,

    This works for me:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application name="Button_dynamic_icon_test"
            xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white"
            initialize="init();">
    
        <mx:Script>
            <![CDATA[
                [Embed("assets/ico1.png")]
                private var icon1:Class;
    
                [Embed("assets/ico2.png")]
                private var icon2:Class;
    
                [Embed("assets/ico3.png")]
                private var icon3:Class;
    
                [Embed("assets/ico4.png")]
                private var icon4:Class;
    
                [Embed("assets/ico5.png")]
                private var icon5:Class;
    
                private function init():void {
                    var idx:uint;
                    var len:uint = 5;
                    for (idx = 1; idx <= 5; idx++) {
                        this["btn" + idx].setStyle("icon", this["icon" + idx]);
                    }
                }
            ]]>
        </mx:Script>
    
        <mx:HBox>
            <mx:Button id="btn1" label="Button 1" />
            <mx:Button id="btn2" label="Button 2" />
            <mx:Button id="btn3" label="Button 3" />
            <mx:Button id="btn4" label="Button 4" />
            <mx:Button id="btn5" label="Button 5" />
        </mx:HBox>
    
    </mx:Application>
    

    Peter