Where to set page width when set into non widescreeen mode?

Hi,

please is there any parameter i could tweak, where I could set the app width?
Widescreen is too wide and compact mode is too small.
Take a look at how it looks on ultrawide.

2 Likes

Hi @Dominik_Novotny

You can insert custom css using the style tag. The below snippet is from the Layout Experiments app in the gallery at awesome-streamlit.org

st.markdown(
        f"""
<style>
    .reportview-container .main .block-container{{
        max-width: {max_width}px;
        padding-top: {padding_top}rem;
        padding-right: {padding_right}rem;
        padding-left: {padding_left}rem;
        padding-bottom: {padding_bottom}rem;
    }}
    .reportview-container .main {{
        color: {COLOR};
        background-color: {BACKGROUND_COLOR};
    }}
</style>
""",
        unsafe_allow_html=True,
    )

Visit the gallery if you wan’t to see it in action and use a slider to experiment with the max-width setting.

4 Likes

Do you know how to add an id or class to containers so that styles can be applied selectively?

This has worked for me. Thank you a lot!

1 Like

Nope

Hi all

There @Marc says, there’s no (officialy) way to set classes or styles in Streamlit today. The approach Mark posted above is really the best unnofficial solution…

That said, we’d very actively working on an API design to support complex layouts as well as customizations like these. We’ll be updating the relevant issues on Github as soon as we have something concrete to share. My guess is that the solution is still couple of months away, though. So please subscribe to your favorite bugs on the list above to stay in the loop!

1 Like

Is there a widescreen mode? From the original question it sounds like there is (a basic) one; however, I’ve been trying to find more information about this and how to enable it, but I haven’t found anything anywhere… Am I just missing something obvious?

Hey @Yasha :wave:,

Thanks for reaching out and good question :blush:.

This can be found under settings within your app. In the hamburger button on the upper right side click settings and then select show app in wide mode and save. This should give you the functionality your looking for. I’ve included a couple of photos below from our hello.py demo app:

@tc1 is there a way to save the widescreen mode selection for each new rendering, like if I’m calling the app into another iframe? Passing an url parameter or passing via env variable or some magic tag :smiley: ?

Thanks

Hi @ai_bi_ci,
thanks for your question. We don’t have a way to do that right now, but it seems a great feature. Feel free to file a Feature Request on this.

Best,
Matteo

Hey @ai_bi_ci :wave:,

This workaround might be helpful as well. Haven’t personally tried it, but multiple community members said it worked for them. Would love to hear if it works for you too!

TC