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>
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

3 Responses to Setting the horizontal scroll position in the TextInput control in Flex

  1. Kevin says:

    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. Kevin says:

    bugger…

    maybe without the angle brackets? :

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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree