Height parameter not working in st.text_area

I am working on a code where i want to decrease the height of my text_area input box. i have tried to use the height parameter but its not reducing the height.
Here is my code:
st.markdown(“”"

/* Remove the gap at the top */
.main .block-container {
padding-top: 20px;
padding-bottom: 10px;
}
.stSelectbox, .stRadio, .stTextArea, .stNumberInput, .stCheckbox, .stButton {
margin-bottom: 5px;
padding: 5px;
}
.stButton button {
background-color: #4CAF50;
color: white;
}
.stButton button:hover {
background-color: #45a049;
}
.stSelectbox, .stRadio, .stTextArea, .stNumberInput {
background-color: #f1f1f1;
padding: 5px;
border-radius: 5px;
}
.suggestions {
background-color: #FFDDC1;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.results {
background-color: #e8f4f8;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
}

“”", unsafe_allow_html=True)

Layout

col1, col2 = st.columns([1, 3])

with col1:
st.header(“Instructions”)

with col2:
col21, col22 = st.columns(2)
with col21:
Product_Name = st.text_area(“Provide the product name”, height=10)
with col22:
Campaign_Name = st.text_area(“Provide the name of campaign”, height=10)

Hi @smriti, welcome to the community! :wave:

The st.text_area frontend component seems to have a minimum height of 95px, which is why you can’t set it to 10px. Also, the CSS selector you’ve used needs to be tweaked.

That setting height to anything less than 95px has no effect is either a bug or undocumented behavior. I’ve submitted a bug report: Setting st.text_area's `height` to anything below 95 has no effect · Issue #9217 · streamlit/streamlit · GitHub

Here’s a working example of how to use the CSS hack to decrease the height:

import streamlit as st

col1, col2 = st.columns([1, 3])

st.markdown(
"""
<style>
div[data-baseweb="base-input"] > textarea {
    min-height: 1px;
    padding: 0;
}
</style>
""", unsafe_allow_html=True
)

height = st.slider("Set the height of the text area", 1, 1000, 10)

with col1:
    st.header("Instructions")

with col2:
    col21, col22 = st.columns(2)
with col21:
    Product_Name = st.text_area("Provide the product name", height=height)
with col22:
    Campaign_Name = st.text_area("Provide the name of campaign", height=height)

text-area-height

Happy Streamlit-ing! :balloon:

2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.