Align to the right

[iuiu]

Hi,
given a widget, for example st.button, how can i align it to the right?
instead of default left

thanks

[Shawn_Pereira]

Hi @iuiu ,

Please reference st.columns from the streamlit docs.

Cheers

[iuiu]

Hi,
thanks for the quick answer.

I don’t a “hacky” way like

_,c1= st.columns([5,1])
c1.button(...)

this can create weird displays, cause is not a right align. I want proper right alignment
Something like

st.button(..., align='right')

thanks

[mathcatsand]

There isn’t a way to do it within the parameters of st.button or configuration of the app. You can inject CSS to change some things, but it will definitely be hacky.

Probably the cleanest thing will be to use the stylable container from the streamlit-extras package. You can use the stylable container around your button and include right-alignment in the CSS.

[griffin]

Has anyone solved this yet.

I tried this:

with stylable_container(
    key="Upload_Data",
    css_styles="""
    button{
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    """
):
    st.button("Upload Data")

but I get something like this

[griffin]

The issue with st.columns is that buttons and markdowns get indented to a newline if too large. It would be nice if you could autofit the right column.

[L_o1]

The solution with streamlit_extras

with stylable_container(
    key="Upload_Data",
    css_styles="""
    button{
        float: right;
    }
    """
):
    submit = st.button("Upload data")