2 Replies Latest reply on Aug 17, 2006 9:47 AM by rvollmar

    how to scroll a textarea to the bottom

    houseofbinary
      in the docs there's a sample that uses
      verticalScrollPosition and maxVerticalScrollPosition to automatically scroll a textarea component to the bottom:

      http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=L iveDocs_Parts&file=00001937.html

      verticalScrollPosition = maxVerticalScrollPosition

      this should work, but somehow it doesn't. using this, textarea only scrolls to the line before the last,
      so this is almost correct but without any use...
      here's a post from another forum with someone having the same problem:

      http://www.mail-archive.com/flexcoders@yahoogroups.com/msg34021.html

      calling validateNow or callLater didn't work either
      someone who solved this problem?
        • 1. Re: how to scroll a textarea to the bottom
          rvollmar Level 1
          Hello,
          Here is some sample code which works for me. Could you please give it a try and let me know how it works? If it does, try to compare it to your source code and see if you can find the key difference. Or send me your source code and I will be glad to take a look.
          - Rob

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" >
          <mx:Script>
          <![CDATA[
          [Bindable] private var theText:String = "This is the first line.\nI am the very model of a modern Major-General\nI've information vegetable, animal, and mineral\nI know the kings of England, and I quote the fights historical\nFrom Marathon to Waterloo, in order categorical\nI'm very well acquainted, too, with matters mathematical\nI understand equations, both the simple and quadratical\nAbout binomial theorem I'm teeming with a lot o' news\nWith many cheerful facts about the square of the hypotenuse\nWith many cheerful facts about the square of the hypotenuse\nWith many cheerful facts about the square of the hypotenuse\nWith many cheerful facts about the square of the hypotepotenuse\nI'm very good at integral and differential calculus\nI know the scientific names of beings animalculous\nIn short, in matters vegetable, animal, and mineral\nI am the very model of a modern Major-General\nIn short, in matters vegetable, animal, and mineral\nHe is the very model of a modern Major-General\nI know our mythic history, King Arthur's and Sir Caradoc's\nI answer hard acrostics, I've a pretty taste for paradox\nI quote in elegiacs all the crimes of Heliogabalus\nIn conics I can floor peculiarities parabolous\nThis is the last line.";

          private function scrollToBottom():void{
          ta1.verticalScrollPosition = ta1.maxVerticalScrollPosition;
          }
          ]]>
          </mx:Script>

          <mx:Button label="Scroll To Bottom" click="{scrollToBottom()}" />
          <mx:TextArea id="ta1" height="100" width="400" text="{theText}" />
          </mx:Application>
          • 2. Re: how to scroll a textarea to the bottom
            rvollmar Level 1
            Hi,
            My bad, I didn't quite reply to the issue. I tried out Darron Schall's response in the thread that you referred to, and it works well. Here's a different sample app.
            - Rob

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="doCreationComplete()" >
            <mx:Script>
            <![CDATA[
            import mx.events.*;

            private var counter:int = 1;

            private function doCreationComplete():void{
            ta1.addEventListener( FlexEvent.VALUE_COMMIT, autoScrollToBottom );
            }

            private function autoScrollToBottom( event:FlexEvent ):void
            {
            // Auto-scroll to the bottom anytime the text changes
            event.target.validateNow();
            event.target.verticalScrollPosition = event.target.maxVerticalScrollPosition;
            }

            private function addLineOfText():void{
            ta1.text += "\nLine " + (++counter).toString();
            }
            ]]>
            </mx:Script>

            <mx:Button label="Add Line Of Text" click="addLineOfText()" />
            <mx:TextArea id="ta1" height="100" width="400" text="Line 1" />
            </mx:Application>