Change main app width

Using Streamlit
1

Hi,

i have a small app that just uses the top level, so no sidebars or anything.

However it is a bit narrow, so i would like to make it wider. I switched to layout=wide but this is actually too wide for what i have and i dislike that it is not centered anymore. Is there a way to keep the centered view but just give it a specific width?

Cheers
Jan-Eric

2

You can upvote this as a feature request here: Customisable layout sizes · Issue #5466 · streamlit/streamlit · GitHub

Meanwhile, you basically have two approaches:

Option 1:
Use layout="wide" and put everything into columns to achieve a percentage width of the full screen (st.columns([2,5,2]) or similar).

Option 2:
Use CSS to change the width of a centered layout app.

3

For example:

st.html("""
    <style>
        .stMainBlockContainer {
            max-width:50rem;
        }
    </style>
    """
)

“Centered” defaults to 46rem.

1 Like
4

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