How to auto-scroll down to end of Text Area when new text is added

#1

Hey there!

I’ trying to display logs on a text area and was wondering if it was possible to force it to automatically scroll down to the end when adding new logs.

Any Ideas ? :smiley:

Edit:

I’ve tried the flex-box trick proposed in this topic, but it didn’t do it, maybe I’m missing something obvious…

html.Div(id='textarea_container',
     style={
            'overflow': 'auto',
            'display': 'flex',
            'flex-direction': 'column-reverse'},
    children=[
            dcc.Textarea(id='console_out_textarea',
                              style={'width': '100%', height': 400}),
    ]),
#2

My guess is that the flex column-reverse trick applies at the element level in the DOM, but not on the contents of a textarea, which is just a single string.

Googling around suggests that to do this on a textarea contents might require javascript.

#3

Ok, thanks for the Help :slight_smile:

#4

Hello @jajarbins, I am facing the same issue. I’d like to know by any chance if you found a solution?

Thx for your help

#5

Hi, you can try using visdcc.Run_js to write your own javascript event listener and action. :slightly_smiling_face:
here is the example code https://github.com/jimmybow/visdcc/blob/master/example/Run_js/Add_event_and_callback.py

1 Like