2 Replies Latest reply on Aug 16, 2012 11:34 AM by voronp

    Scroller fixed at bottom


      I am having a RichEditableText field fich gets filled with text dynamically. There is a vertical scroller attached to it which should behave exactly the opposite way as it does.

      I need to have it to stick to the bottom the field, displaying the last line. However this does not work.

      My setup is as follows:


      I am having a text input field to enter text.

      I am having the RichEditableText field surrounded by the <s:scroller> control.

      And I set the VerticalScrollPosition of the scroller to the RichEditableText content.height.


      Now this is what is happening and it is really weird:


      When entering text it gets displayed properly. When I have entered a few lines the vertical scroll bar appears as intended. But then the scrollbar does no longer get updated with every new line entered. In fact it only gets updated every 3 new line. Then it stick to the bottom for 1 input and then it pauses for 3 more inputs. It is very weird.


      When I set it to listen to the updateCompete event of the RichEditableText field and set the VerticalScrollPosition of the scroller to the RichEditableText content.height it works as intended and the scrollbar remains at the bottom. However now scrolling is no longer possible as every attempt to scroll causes the update event to get fired, thus bouncing the scrollbar back to the content height value.


      So it seems that one solution could be to find another event that is fired when the RichEditableText field has been updated, but does not fire when the scrollbar is the reason for updating, or to prevent the updateCancel Event to fire when the field has been updated due to scrolling.

      Or there is a totally different approach to get this working. But I was not able to get it working the way I need it yet. Any help or hints would be appreciated.


      Here is the code of what I am doing:


      MXML part:


      <s:Scroller id="vscroller" width="100%" height="100%" horizontalScrollPolicy="off">
      <s:RichEditableText height="100%" width="100%" id="ret" updateComplete="ret.verticalScrollPosition=ret.contentHeight;"/>


      Actionscript part:


      flow = TextConverter.importToFlow(message, TextConverter.TEXT_FIELD_HTML_FORMAT) as TextFlow;
      paragraph = flow.getChildAt(0) as ParagraphElement; 
        • 1. Re: Scroller fixed at bottom
          tessaquin Level 1

          After doing some digging and tracing I wonder if this behaviour qualifies as a bug.

          In the mxml I am using the updateCompleted event to trace the position of the vertical scrollbar. Additionally I trace the value before the update event has fired.

          The output is as follows:



          A new message arrives, which causes updateComplete to fire:  After UpdateComplete Vscroller height: 434
          After UpdateComplete Vscroller verticalScrollPosition: 0
          After UpdateComplete Content height: 443.2617187499998
          Programmatically the vertical scroll position gets set to content.height-vscroller height:
           Before UpdateComplete Vscroller height: 434
          Before UpdateComplete Vscroller verticalScrollPosition: 9.261718749999773
          Before UpdateComplete Content height: 443.2617187499998
           But this seems to make the updateComplete Event to fire again and reset the position to the values before:
           After UpdateComplete Vscroller height: 434
          After UpdateComplete Vscroller verticalScrollPosition: 0
          After UpdateComplete Content height: 443.2617187499998


          Actually not the behaviour I would expect. Once the vertical scroll position has been set I would not expect the update event to reset the position to something else.


          Any way my solution is to go via Actionscript and add an updateComplete event to the RichEditableText field by hand. This acts differently and does not override the value for verticalScrollPosition once it has been set.

          • 2. Re: Scroller fixed at bottom

            if anyone still need a solution:

            you should attach event listener to RichEditableElement before adding new text line, then catch event and update scroller.verticalScrollBar.value to it's maximum. the reason is you update scroll position before text area changed and completely updated, but you should do this after. example follows:


                 chatTextArea.addEventListener(mx.events.FlexEvent.UPDATE_COMPLETE, onChatTextAreaChanged);



            public function onChatTextAreaChanged(event:*):void {

                 chatTextArea.removeEventListener(mx.events.FlexEvent.UPDATE_COMPLETE, onChatTextAreaChanged);

                 chatTextScroller.verticalScrollBar.value = chatTextScroller.verticalScrollBar.maximum;