Scroll HTML Div down automatically for new incoming lines

Dash Python
1

I have a div on my interface that is serving as a console style log window which provides detailed information about an ongoing complex calculation. Everything works fine, but the div does not auto scroll down to keep up with the new log lines coming in. The only workaround I am aware of is using javascript in this manner:

var objDiv = document.getElementById(“your_div”);
objDiv.scrollTop = objDiv.scrollHeight;

but I am not sure how to incorporate javascript into python dash code or if there is an easier method. Any insight would be very helpful.

Thanks,
Nathan

2

It’s possible to add JavaScript scripts to your app as described in the user guide, however interacting with the DOM can be messy as React is controlling the DOM. I’m not sure if your situation falls into that category or not. In general, if you can do it with CSS alone, that’s going to be easier with Dash. Here’s a stack overflow reply that describes a way to do this with CSS flex-box.

Thinking a bit outside the box, would having your logs reverse sorted be an option? Then the default scroll position would show the tail of the logs.

1 Like
3

nedned, the CCS flex box trick worked wonderfully! Thank you so much.

1 Like