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

🎈 Using Streamlit
1

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.

screen
screen3440×1306 137 KB

3 Likes
2

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.

image
image1962×1043 193 KB

11 Likes
3

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

4

This has worked for me. Thank you a lot!

1 Like
5

Nope

6

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
7

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?

8

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:

56%20PM
56%20PM2734×1428 308 KB

40%20PM
40%20PM2734×1428 205 KB

3 Likes
9

@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

10

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

11

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

12

That was all i was looking for : D

13

Worked very well. Thank you

14

Thank you for your code. This worked great for me previously but it stopped working at certain point persumbly because of some version update. Do you have a new solution? Best, Don

15

Has anyone found the solution for latest version of Streamlit?

16

Yes. Change it to reportview-container - > appview-container

Example :
import streamlit as st

def set_width(width: str):
st.markdown(
f"""

.appview-container .main .block-container{{ max-width: {width}; }} 
""",
    unsafe_allow_html=True,
)

st.form(“test_form”)
st.text_input(“Text Input”)
wide_btn = st.button(“wide”)
centered_btn = st.button(“cent”)

if wide_btn:
set_width(“80%”)

if centered_btn:
set_width(“300px”)

1 Like
17

Look at my comment

18

This is what I have been looking for! It seems that the fix using .reportview-container no longer works on newer versions of Streamlit, but .appview-container worked for me on version 1.7.0
Thank you so much!

1 Like