Displaying Scrolling Text

Anvil Q&A
1

What would be the best way to display real time text (don’t worry about its collection, just the display of it) ?

I was going to use a textarea but as the text gets added to and eventually goes off the bottom I can’t seem to keep the latest line visible (ie programmatically scroll down to the last line). I just get what’s already there and a vertical scroll bar which requires manually moving.

Anyone got any suggestions?

2

Use a repeating panel/data grid and show most recent items first? That seems the easiest approach, if it works for your case.

3

You can write a JS function to make the TextArea scroll down when called.

<div anvil-slot-repeat="default" class="scroll-me"></div>

<script>
  var scrollTextArea = function() {
    var $textarea = this.find('.scroll-me textarea');
    $textarea.scrollTop($textarea[0].scrollHeight);
  }
</script>

Here’s an app with a CustomComponent that does that. Call its scroll_to_bottom method whenever you want it to scroll to the bottom.

https://anvil.works/build#clone:XQH7GSHBV7IBQQT4=5KKAHZTPKFGXECJ2M6YGUNXC

scroll-text-area
scroll-text-area.gif1200×314 187 KB

This is a great way to display log feeds and other line-based output. I used it in the SSH Client app I wrote when you were wondering about SSHing into your machines remotely without needing to remember your laptop (this thread: Browser Based SSH).

5 Likes
4

This looks exactly like what I need. How would I go about adding this to my own project?

5

To add it to your own project:

  1. Clone it (click the ‘open in Anvil’ in my post, you’ll get a copy of the app in your account.)
  2. Open the app you want to use it in and click on ‘Dependencies’ in the Gear Menu

47

  1. You’ll see a dropdown entitled ‘Add a Dependency’. Find your clone of ScrollTextArea and select it.
  2. When you close that popup you should now see ScrollTextArea in the Toobox under Custom Components. You can drag-and-drop any number of ScrollTextAreas onto your app:

54

2 Likes
6

You can do this via python now. For example, if you have a textarea named “text_area_1” you can do this:

textarea = anvil.js.get_dom_node(self.text_area_1)
textarea.scrollTop = textarea.scrollHeight
4 Likes