How to reduce the top blank area height of streamlit app?

🎈 Using Streamlit
1

When we start a streamlit app, after open explorer, we will see a huge blank area at the top.
How can we control the blank height with some argument and where we can do this?
Thank you.

1 Like
2

I adapted this from @Marc’s Awesome Streamlit Resources app.


BACKGROUND_COLOR = 'white'
COLOR = 'black'

def set_page_container_style(
        max_width: int = 1100, max_width_100_percent: bool = False,
        padding_top: int = 1, padding_right: int = 10, padding_left: int = 1, padding_bottom: int = 10,
        color: str = COLOR, background_color: str = BACKGROUND_COLOR,
    ):
        if max_width_100_percent:
            max_width_str = f'max-width: 100%;'
        else:
            max_width_str = f'max-width: {max_width}px;'
        st.markdown(
            f'''
            <style>
                .reportview-container .sidebar-content {{
                    padding-top: {padding_top}rem;
                }}
                .reportview-container .main .block-container {{
                    {max_width_str}
                    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,
        )
2 Likes
3

it works, change the padding-top argument, blank area height is changed.
Thank you very much.

4

Hello there, I hope you are doing great.
So, I have been trying to create a mini project in Streamlit and I have ran into the padding issues. I used Marc’s code (the above styling you suggested) but it isn’t working for the sidebar. It actually doesn’t even work for the original content. There’s still some padding for some reason. I will share the screenshot of the page and the code I used.

image
image1542×532 27.1 KB 

padding_top = 0
padding_bottom = 10
padding_left = 1
padding_right = 10
# max_width_str = f'max-width: 100%;'
st.markdown(f'''
            <style>
                .reportview-container .sidebar-content {{
                    padding-top: {padding_top}rem;
                }}
                .reportview-container .main .block-container {{
                    padding-top: {padding_top}rem;
                    padding-right: {padding_right}rem;
                    padding-left: {padding_left}rem;
                    padding-bottom: {padding_bottom}rem;
                }}
            </style>
            ''', unsafe_allow_html=True,
)

I hope I addressed my problem clearly. Thank you for your help!

5

I think the layout classes have changed in the latest Streamlit versions. As you know this is not a recommended method of adjusting layout styles; essentially it’s a hack - unsafe_allow_html=True is a clue! :slight_smile:

I see that the sidebar is no longer enclosed in a div with class sidebar-content. If you open the browser’s dev tools (F12) you can see that the class names are probably custom generated, or at least you can’t rely on finding a stable class name container path like .reportview-container .main .block-container. Therefore, find the specific classes for the sidebar in your app and set their attributes in your code. Here’s what I had to do to make the sidebar content v-align with the main content.

        st.markdown(
            f'''
            <style>
                .reportview-container .css-1lcbmhc .css-1outpf7 {{
                    padding-top: 35px;
                }}
                :
                :
               etc.
                :
                :
            </style>
            ''',

Notice my sidebar container path is .reportview-container .css-1lcbmhc .css-1outpf7. and by experimenting I arrived at padding-top: 35px.

HTH
Arvindra

6

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