Custom streamlit text area

Question

I'm trying to customize st.text_area to a specific width and height using CSS - however, it is not responsive to width and height changes. Is there anything else I can try?

def main():
    # Custom CSS to modify the textarea width and height
    custom_css = '''
    <style>
        textarea.stTextArea {
            width: 800px !important;
            height: 400px !important;
        }
    </style>
    '''

    st.write(custom_css, unsafe_allow_html=True)

    st.title("Custom Textarea Width and Height")
    user_input = st.text_area("Type your text here:")

    st.subheader("You typed:")
    st.write(user_input)

if __name__ == "__main__":
    main()

Answer 1

You should use markdown for styling or html syntax instead of write and make sure you get the correct class.
You can also set the height using the height parameter. inside If you don't need the textarea.st-cl part of the clothing css.

custom_css = '''
    <style>
        div.css-1om1ktf.e1y61itm0 {
          width: 800px;
        }
        textarea.st-cl {
          height: 400px;
        }
    </style>
    '''
st.markdown(custom_css, unsafe_allow_html=True)

or:

custom_css = '''
    <style>
        div.css-1om1ktf.e1y61itm0 {
          width: 800px;
        }
    </style>
    '''
st.markdown(custom_css, unsafe_allow_html=True)
user_input = st.text_area("Type your text here:", height=400)

---