Reduce whitespace from Top of the page in Sidebar as well as place two elements next to each other

Using Streamlit
1

image
image754×271 3.25 KB
.

Here is the code that i tried.

import streamlit as st

col1,col2=st.sidebar.columns([1,10])
with col1:
st.write(‘Logo’)
with col2:
st.sidebar.markdown(


Report- OCT’21

,unsafe_allow_html=True).

Appreciate if i can have a solution

2

try to add this to your code

st.markdown(
            f'''
            <style>
                .reportview-container .sidebar-content {{
                    padding-top: {1}rem;
                }}
                .reportview-container .main .block-container {{
                    padding-top: {1}rem;
                }}
            </style>
            ''',unsafe_allow_html=True)
3

Thank you. Main content whitespace got reduced. But the sidebar whitespace remains.

4

The CSS in the recent Streamlit versions has changed, and this is what I use:

common.py

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 .css-1lcbmhc .css-1outpf7 {{
                    padding-top: 35px;
                }}
                .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,
        )

app.py

import streamlit as st
from common import set_page_container_style

st.set_page_config(
    page_title='My App',
    layout='wide',
    page_icon=':rocket:'
)

set_page_container_style(
        max_width = 1100, max_width_100_percent = True,
        padding_top = 0, padding_right = 10, padding_left = 5, padding_bottom = 10
)

def about():
    st.sidebar.markdown('---')
    st.sidebar.info('''
    ### Mega App

    Updated: 26 November, 2021''')

if __name__ == '__main__':
    st.sidebar.image('./images/logo.png', output_format='png')
    st.title('My Mega App')
    about()

Arvindra

1 Like
5

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