In Dart-polymer I have been unable to find a way to keep a text-box scrolled to the bottom

Question

I have found multiple ways to do this in various browsers and languages but nothing I can find has worked for Dart-polymer in Chrome.

Otherwise everything is very simple and standard:

<template> 
   <style>
      textarea {
        width:  825px;
      }
    </style>
    <div>       
      <textarea id="ta" rows="10" on-mouseover="{{on_mouse_over}}">                  
         {{message}}
      </textarea>       
    </div>
</template>

Thanks!

Answer 1

I guess this is what you want:

@CustomTag('my-text')
class MyText extends PolymerElement {
  @observable String message = "";

  MyText.created() : super.created();

  void messageChanged(old) {
    var ta = $['ta'];
    ta.scrollTop = ta.scrollHeight;
  }

  void attached() {
    super.attached();
    new Timer.periodic(new Duration(seconds: 1), (_) => message += 'some text ${new DateTime.now()}\n');
  }
}

I added id="ta" to the <textarea> to make $['ta'] work