Scroll to bottom of textarea on query success event

💬 App Building
,
1

Hi,

I am pulling log data from an API and would like to show the latest entry/ bottom of log. I added Javascript:

document.getElementById("deploymentLogTextArea--0").scrollTop=10000;

in the success handler but it doesn't appear to be able to access the DOM at that level, i.e. nothing happens and console gives an error. From developer tools console it works fine. How do I make the textarea scroll to bottom?

Best regards

Rich

2

Welcome to the forum @rjones-cto

I poked around and I don't see a way to do this. Others may have a trick?

One thing I can tell you is that direct DOM manipulation does not work in Retool.

One workaround I may suggest is to reverse sort your Log data before assigning it to your Text Area.

I assume that since you are using an API your log file comes back as an array so just use {{myAPI.data.theArrayValue.reverse()}} in your Text Area's Default Value

If it some back as multiline string use {{myAPI.data.theStringValue.split('\n').reverse()||

3

Thanks @bradlymathews, I thought I was onto nothing with direct DOM manipulation so thanks for confirming.

I really don't want to reverse sort the log, but it's a clever idea.

I don't have to use a text area, maybe some other component could fullfil the goal, to be honest, textarea is less than perfect as it would be good to be able to render as HTML. Maybe I should write my own, although my React skills are not that hot.

If that inspires any ideas, please let me know.

Best regards

Rich

4

How about a table? You can edit the styles to get rid of most of its "tableness" and it can look almost like a list. If you make the column an HTML type you can then make it do whatever you want.

5

Interesting idea, I'll try it!

6

Just want to drop in here that if you're looking for a read-only component to render HTML there are a few options here! For instance, you can set an HTML component with the following CSS:

.logs {
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
  height: 200px;
}

And it should set your scroll to the bottom automatically.

7

Thanks for the suggestion @Kabirdas , I will try that out soon when I get back to logs!