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>

3 thoughts on “Setting the horizontal scroll position in the TextInput control in Flex

  1. hey Peter,

    Keep up the great work on this site.

    I’m sure you already know this but a quick search for “animate scroll” showed no results on your site…

    I was recently trying to achieve some smooth pageScroll animation using Flex containers and without creating large movieclips where the y co-ordinate was adjusted.

    In the end I used (hope this code works):

    <

    and set the “fromValue”, “toValue” and “target” dynamically based on the visible viewStack container.

    Works a treat: http://hummingbirdbaby.com.au/

    cheers

    kev

  2. bugger…

    maybe without the angle brackets? :

    <mx:AnimateProperty id=”animateScroll” property=”verticalScrollPosition”/>

Comments are closed.