Setting the horizontal scroll position in the TextInput control in Flex

The following example shows how you can progammatically scroll the Flex TextInput control by setting the horizontalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/27/setting-the-horizontal-scroll-position-in-the-textinput-control-in-flex/ -->
<mx:Application name="TextInput_horizontalScrollPosition_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textInput_change(evt:Event):void {
                slider.maximum = textInput.maxHorizontalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPosition:">
                <mx:HSlider id="slider"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            text="The quick brown fox jumps over the lazy dog."
            horizontalScrollPosition="{slider.value}"
            width="100"
            creationComplete="textInput_change(event);"
            change="textInput_change(event);" />

</mx:Application>

Tagged as: horizontalScrollPosition, maxHorizontalScrollPosition