Hi guys, im new to ST and im absolutely loving programming in it.
But Im having some hard times styling the components since we dont have an unique ID for the divs.
I want to remove or make it smaller, this empty space on the top of my page, since it is a “lose” of space, I removed the header/footer because I need it in fullscreen to show the table a little bigger.
Currently you can style your Streamlit app by injecting CSS code. Youtuber @andfanilo explains it in more detail and some more advanced stuff in this video:
Assuming your page is in wide mode, you could use the following code, with some adjustments, to remove blank space at top and bottom of a Streamlit page on version 1.27.2:
st.markdown("""
<style>
/* Remove blank space at top and bottom */
.block-container {
padding-top: 0rem;
padding-bottom: 0rem;
}
/* Remove blank space at the center canvas */
.st-emotion-cache-z5fcl4 {
position: relative;
top: -62px;
}
/* Make the toolbar transparent and the content below it clickable */
.st-emotion-cache-18ni7ap {
pointer-events: none;
background: rgb(255 255 255 / 0%)
}
.st-emotion-cache-zq5wmm {
pointer-events: auto;
background: rgb(255 255 255);
border-radius: 5px;
}
</style>
""", unsafe_allow_html=True)
But do keep in mind this CSS code can change in future versions of Streamlit, as this method is not officially supported, it is more of a “workaround” at the moment.