Reduce white space top of the page

Using Streamlit
1

I find the white space on the top of the page of streamlit apps a bit too much, is there any way I can reduce the white space? Thanks!

6 Likes
2

Hi @Philip_Oosterholt , this seems to have been answered in

Cheers

1 Like
3

Thanks, the solution didnt work but I managed to change the properties with some tweaking:

# Remove whitespace from the top of the page and sidebar
st.markdown("""
        <style>
               .css-18e3th9 {
                    padding-top: 0rem;
                    padding-bottom: 10rem;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }
               .css-1d391kg {
                    padding-top: 3.5rem;
                    padding-right: 1rem;
                    padding-bottom: 3.5rem;
                    padding-left: 1rem;
                }
        </style>
        """, unsafe_allow_html=True)
7 Likes
4

The code seems to be working locally but not on streamlit cloud. Kindly find some other solution

3 Likes
5

Has anyone found a recent fix for this?

4 Likes
6 
st.markdown("""
        <style>
               .block-container {
                    padding-top: 1rem;
                    padding-bottom: 0rem;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }
        </style>
        """, unsafe_allow_html=True)

This is working for me on AWS. It will probably work in streamlit cloud too!! You can change the numbers of rem in the padding to your liking.

16 Likes
7

thanks, this works for me.

1 Like
8

FYI, putting zero padding for the top will prevent st.info and other user messages from displaying completely. The least amount of rem to fully display the messages at the top of the app is 3rem from my testing.

1 Like
9

This seems to stop working, at least with streamlit 1.28.1. It changes the padding left and right, but not at the top…

2 Likes
10

This works, I am using streamlit 1.31.0.

1 Like
11

Hey! Thanks for the answer. It works for me as I’m using streamlit 1.30.0.

My problem is just that the block code is applying top padding on SideBar, relocating my page Title downwards. Any tips on applying only on main page container?

No experience with CSS at al…

‘app_settings.py’:

def reduce_top_whitespace():

# Reducing whitespace on the top of the page
st.markdown("""
<style>

.block-container
{
    padding-top: 1rem;
    padding-bottom: 0rem;
    margin-top: 1rem;
}

</style>
""", unsafe_allow_html=True)

In my ‘Home.py’ page:

Sidebar

with st.sidebar:
    st.markdown('# 🏠 Home')
    add_vertical_space(2)

# Applying common settings
app_settings.apply_common_settings()
app_settings.reduce_top_whitespace()

Thank you!

3 Likes
12

Here’s what did the trick for me, but it screws the sidebar display

st.markdown("""
        <style>
               #root > div:nth-child(1) > div.withScreencast > div > div > div > section:nth-child(2) {
                    height: 3rem !important;
                }
        </style>
        """, unsafe_allow_html=True)
1 Like
13

Thanks very much for this. It perfectly works for me.
Additionally you can add one more line to make the header transparant if required, helps while scrolling:

st.markdown(
    """
        <style>
                .stAppHeader {
                    background-color: rgba(255, 255, 255, 0.0);  /* Transparent background */
                    visibility: visible;  /* Ensure the header is visible */
                }

               .block-container {
                    padding-top: 1rem;
                    padding-bottom: 0rem;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }
        </style>
        """,
    unsafe_allow_html=True,
)
14

st.markdown(“”"

div[data-testid="stMainBlockContainer"] { width: 90% !important; padding: 0rem !important; } section[data-testid="stMain"] { padding: 0rem !important; }

“”", unsafe_allow_html=True)