Skip to content

Instantly share code, notes, and snippets.

@asehmi
Last active April 29, 2022 13:19
Show Gist options
  • Save asehmi/c0fa3a9486ffc6f156c8d3bc203fb860 to your computer and use it in GitHub Desktop.
Save asehmi/c0fa3a9486ffc6f156c8d3bc203fb860 to your computer and use it in GitHub Desktop.
It is possible to get rid of that expanse of whitespace at the top of Streamlit apps
#
# It's a bit of a CSS hack but it is possible to get rid of that
# large amount of whitespace at the top of Streamlit apps!
#
# If this hack stops working, it's likely the Streamlit app CSS
# classes have changed. Open up dev tools and find the new names
# to update the CSS below. :-)
#
# UPDATED 29/4/2022 with new classes
#
####################################
# *** Put this code in 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>
header {{
visibility: hidden;
height: 0%;
}}
div[class="css-1adrfps e1fqkh3o2"] {{
{max_width_str}
padding-top: {padding_top}px;
}}
div[class="block-container css-12oz5g7 egzxvld2"] {{
{max_width_str}
padding-top: {padding_top}px;
padding-right: {padding_right}px;
padding-left: {padding_left}px;
padding-bottom: {padding_bottom}px;
}}
div[class="css-1adrfps e1fqkh3o2"] {{
color: {color};
background-color: {background_color};
}}
.appview-container {{
color: {color};
background-color: {background_color};
}}
</style>
''',
unsafe_allow_html=True,
)
#################################
# *** Put this code in 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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment