search

Home  >  Q&A  >  body text

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

<p>In my scenario I have two st.columns with two textareas. One for user input and another for generated text. </p> <p>Is it possible to make the text area expand with each line and remove the scroll bars in the text area? </p> <p>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. </p>
P粉007288593P粉007288593526 days ago886

reply all(1)I'll reply

  • P粉785957729

    P粉7859577292023-09-05 15:42:29

    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>

    reply
    0
  • Cancelreply