Question 225564 in Html Question posted in
Some basic documentation can be found here.

Html – How can I add dynamic height adjustments for text-areas in Streamlit?

In my scenario i have two st.collumns with two textareas. One is for User-Input the other one is for generated text.

Is it possible to expand the textarea with every line and get rid of the scroll bar in the text area?

While testing I was only able to use the scrollbar and I know that you are able to use st.markdown to insert HTML, but I don’t know how to call the textareas and how to edit these to adjust the height dynamically.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    import streamlit as st
import streamlit.components.v1 as v1

st.set_page_config(page_title="Test Site", layout="wide")


col1, col2 = st.columns(2)

with col1:
    userInput = st.text_area("Input:")

with col2:
    generatedText = st.text_area("Output:", key="Output")


#Testbox
html_string='''
    <textarea name="" id="" cols="30" rows="4" class="textarea-test"></textarea>
    <script>
        const textArea = document.querySelector(".textarea-test")

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

v1.html(html_string)

    The testbox is now working. The problem now is to identify the two textareas created by streamlit inside of the collumns above. The document known to the script does not know these two textareas. Therefore selection by querryselector is not possible.


  2. 0

    You will need to write a small script which will do the work. Checkout this

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search