Prevent widgets from exceeding width of container with border and padding

Using Streamlit
1

Summary

I would like to place a border around manually created containers in a sidebar to visually group widgets together (without requiring the submit button of st.form()). I can create the border using the method in this post - Applying custom CSS to manually created containers - but if I add padding the widgets protrude out the right of the container? Is there a way to adjust the width of the widgets so that they stay within the borders of the container, ideally with padding on each side? I have tried a three column layout as suggested in this post - Change width of selectbox - but the columns inherit the same border as the container. Example code snippet below. Thanks!

Steps to reproduce

Code snippet:

import streamlit as st

container1 = st.sidebar.container()

selectbox = container1.selectbox('Make a selection', ('A', 'B', 'C'))

slider = container1.select_slider('Left or Right?', options = ['Left', 'Right'])

# code  adapted from https://discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428
st.markdown(
    """
<style>
    div[data-testid="stVerticalBlock"] div[style*="flex-direction: column;"] div[data-testid="stVerticalBlock"] {
        border: 1px solid black;
        border-radius: 2%;
        padding: 10px;
    }
</style>
""",
    unsafe_allow_html=True,
)
2

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