Streamlit tutorial: How to dynamically adjust the height of the text area?

Question

In my scenario I have two st.columns with two textareas. One for user input and another for generated text.

Is it possible to make the text area expand with each line and remove the scroll bars in the text area?

While testing, I can only use scrollbars, and I know you can use st.markdown to insert HTML, but I don't know how to call textareas and how to edit these to adjust the height dynamically.

Answer 1

You need to write a small script to do this job. Please see the following code:

const textArea = document.querySelector('.textarea-test')

textArea.addEventListener('input',(e)=>{
textArea.style.height = "auto"
  textArea.style.height = `${textArea.scrollHeight}px`;
})

<textarea name="" id="" cols="30" rows="4" class="textarea-test"></textarea>