Specify Exact Width (Not Relative) of st.column()

Using Streamlit
1

I have created a sticky bar on the bottom of my page. I would like two buttons to appear directly next to one another in my app (aligned to the left). I want the width of the buttons to be exactly 100 px each, separated by approximately 25px of space. I do not want the width of these buttons to expand or contract when the browser window is pulled wider or more narrow.

With the help of streamlit-extras.stylable_container I know I can specify the exact width of these buttons. However, the columns the buttons are in overlap.

It seems what I really need is to specify the exact width of the button_cols created with st.columns, themselves. I cannot seem to figure out how to do this with the stylable_containers.

Desired Look:

image
image648×131 3 KB

Problem when screen is too narrow (use_container_width=True):
image

Problem when screen is too narrow (specifying exact button size with stylable_container):
image

Sample code:

import streamlit as st
from streamlit_extras.stylable_container import stylable_container


def create_sticky_bar():
    with stylable_container(
        key='sty',
        css_styles='''
            {
                position: fixed;
                padding-bottom: 0.1rem;
                background: white;
                z-index: 1000;
                padding: 0 0;
                bottom: 0rem;  
            }
            div[data-testid="stElementContainer"] div:has(div.fixed-footer-w-buttons) div {
            border-top: 1px solid #223398;
            }
        '''
        ):
        with st.container(height=100, border=False):
            button_bar = st.container()
            button_bar.write("""<div class='fixed-footer-w-buttons'><div/>""", unsafe_allow_html=True)
            with button_bar:
                button_cols = st.columns([1, 1, 10])


    return button_bar, button_cols

st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")
st.write("Filler")

button_bar, button_cols = create_sticky_bar()
with button_bar:
    if st.session_state.patient_edit_mode or st.session_state.new_patient_mode:
        with button_cols[0]:
            with stylable_container(
                key="submit_button",
                css_styles="""
                    button {
                        width: 100px;
                    }
                    """,
            ):
                save_button = st.button('SAVE', type='primary', use_container_width=True)
        with button_cols[1]:
            with stylable_container(
                key="cancel_button",
                css_styles="""
                    button {
                        width: 100px;
                    }
                    """,
            ):
                cancel_button = st.button('CANCEL', type='secondary', use_container_width=True)

Can anyone help?

2

Advanced theming is currently under development and there should be direct support to accomplish your adjacent buttons soon. I believe this will come with “Flex layout.”