Disabling live scrolling on a Flex TextArea control

The following example shows how you can toggle live scrolling on a TextArea control in Flex by setting the liveScrolling property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/disabling-live-scrolling-on-a-flex-textarea-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="liveScrolling:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            liveScrolling="{checkBox.selected}"
            editable="false"
            condenseWhite="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

9 thoughts on “Disabling live scrolling on a Flex TextArea control

  1. Hi. I can not experience any differnce when enabling or disabling the checkbox. Could you please describe the functionality of liveScrolling?! – Further I myself cannot manage to set up scrolling behaviour on a TextArea component – what is the secret trick? Thx, Tobias

  2. Tobias,

    In the example above, select the checkbox and try scrolling the TextArea control’s vertical scrollbar thumb. As you click and drag the scrollbar thumb, you should see the text scroll line by line.
    Now, deselect the checkbox and try again. Now the text doesn’t scroll as you drag the scrollbar, but will scroll to the correct position when you release the scrollbar thumb.

    Peter

  3. Can you tell me how I can set up scrolling for a TextArea via Actionscript? It seems as if it is disabled by default.

  4. Tobias,

    You can scroll the Flex TextArea control vertically using the verticalScrollPosition and maxVerticalScrollPosition properties, as seen in the following example:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white"
            creationComplete="init();">
    
        <mx:Script>
            <![CDATA[
                private function init():void {
                    callLater(setMaxVScrollPos);
                }
    
                private function setMaxVScrollPos():void {
                    slider.maximum = textArea.maxVerticalScrollPosition;
                }
            ]]>
        </mx:Script>
    
        <mx:String id="lorem" source="lorem.html" />
    
        <mx:ApplicationControlBar dock="true">
            <mx:Form styleName="plain">
                <mx:FormItem label="verticalScrollPosition:">
                    <mx:HSlider id="slider"
                            minimum="0"
                            snapInterval="1"
                            liveDragging="true" />
                </mx:FormItem>
            </mx:Form>
        </mx:ApplicationControlBar>
    
        <mx:TextArea id="textArea"
                text="{lorem}"
                verticalScrollPosition="{slider.value}"
                verticalScrollPolicy="on"
                width="100%"
                height="100%"
                resize="init();" />
    
    </mx:Application>
    

    Peter

  5. Holy shit! I got it.
    For debugging purposes (with Firefox 3 Console does not show trace prints) I use Safari as Webbrowser. – After days of testing I tried to scroll the TextArea within Firefox: I works. Safari just ignores the Scrollwheel of my mouse so I thought I need to set some attribute…
    Sorry for going onto your nerves.
    -) Tobias

  6. How can I reset a TextArea scrollbar when switching from one view to another with a viewstack?
    In other words, when I scroll the text to the bottom in one canvas they switch to another canvas, when I go back to the previous canvas I want the TextArea to reset to the top of the text.
    I hope this makes sense.

Comments are closed.