Add Border To Specific Container

Using Streamlit
1

Hi Team,
I want to add a border to a specific container in the script.
I’ve attempted utilizing a custom CSS solution from earlier discussions, however that approach borders every container.
I wanted to add a border to just one of the two containers that I have in my script and set a custom height for that container. Basically i want a visible box around the radio buttons.

Please have a look at the code below.
I want to add border to container 1 only.

import streamlit as st

list_of_tables = ['T1', 'T2', 'T3', 'T4', 'T5', 'T6']

with st.container():
    st.write("In Container 1")
    table_name = st.radio(
        "Please Select Table",
        list_of_tables)

with st.container():
    st.write("In Container 2")

please have a look at the screenshot of the output below

image

I’m running the code locally
Streamlit version : 1.26.0
Python version : 3.9

2

hi @varad
try this

import streamlit as st

list_of_tables = ['T1', 'T2', 'T3', 'T4', 'T5', 'T6']

# Add CSS styles for the containers
container_style = """
    <style>
        .container1 {
            border: 2px solid #3498db;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 20px;
        }
        .container2 {
            /* Add styles for Container 2 if needed */
        }
    </style>
"""

# Display the CSS styles
st.markdown(container_style, unsafe_allow_html=True)

# Use the styled containers
with st.container() as container1:
    container1.markdown("<div class='container1'>", unsafe_allow_html=True)
    st.write("In Container 1")
    table_name = st.radio("Please Select Table", list_of_tables)
    container1.markdown("</div>", unsafe_allow_html=True)

with st.container() as container2:
    container2.markdown("<div class='container2'>", unsafe_allow_html=True)
    st.write("In Container 2")
    container2.markdown("</div>", unsafe_allow_html=True)
3

Not working for me I’m afraid.

I get a ‘NoneType’ object has no attribute ‘markdown’ for the container1.markdown statement after the with statement and the object shows as None in the vscode debugger.

Creating the container manually with:
container1=st.container()
with container1:
container1.markdown(“

”,unsafe_allow_html=True)

gets around this but the the resulting container is one pixel high and the st.write (or even container1.write) statement renders outside the container.

streamlit is 1.28.2. Not sure where to go with this or what is happening.

4

st.container and st.form now have a border parameter to show or hide a border as of version 1.29.0.

1 Like
5

Hi @mathcatsand

Its working thank you!!

6

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