Setting the text alignment in a NumericStepper control in Flex

The following example shows how you can set the text alignment for a Flex NumericStepper 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/18/setting-the-text-alignment-in-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <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:ComboBox id="comboBox"
                        dataProvider="{arr}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            textAlign="{comboBox.selectedItem.label}"
            width="100" />

</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 shown in the following snippet:

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

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

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

8 thoughts on “Setting the text alignment in a NumericStepper control in Flex

  1. There is an easy way to add leading zeros to the numeric stepper in mxml? [ie. 001, insted of 1]

  2. vigil,

    This should do it:

    <?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.NumericStepperEvent;
    
                private var nsMask:String = "000";
    
                private function formatNumber(evt:Event):void {
                    var value:String = numericStepper.value.toString();
                    value = (nsMask + value).substr(-nsMask.length);
                    numericStepper.mx_internal::inputField.text = value;
                }
            ]]>
        </mx:Script>
    
        <mx:NumericStepper id="numericStepper"
                minimum="0"
                maximum="255"
                value="3"
                width="100"
                textAlign="center"
                creationComplete="formatNumber(event);"
                change="formatNumber(event);" />
    
    </mx:Application>
    

    Peter

  3. I have made my buttons larger so the stepper can be used on a 19″ touchscreen display. So I’m looking for a way to set the VerticalAlign to middle. I’m trying to keep the text size consistant on the form so increasing the fontsize is not an option.

    Any ideas would be greatly appreciated.

    Thanks!

  4. Hi!

    Is it possible to align vertically the text inside a halo numeric stepper?
    I’m using a numeric stepper as an item editor in a datagrid.

    Thanks!!

Comments are closed.