Leading Gap

[Shawn_Pereira]

Hi,

I upgraded to Streamlit, version 1.21.0 today.

I used a simple command: st.subheader(f"**Project Setup: Subjects:**")

Please refer to the attached pix. Can someone from Streamlit explain the logic of having such a leading gap between the top of the page and the 1st entry, that changes with every new release, or the wisdom of not having commands to make any such corrections with code?

Apologies for the frustration in trying to inspect the JS… but am downgrading to 1.16 until I can figure out a resolution.

Shawn

[Charly_Wargnier]

Hi Shawn!

I hope you’re doing well!

I’m not sure, but I’ve asked one of the developers to get back to you on this.

Thanks for your patience.

Best wishes,
Charly

[Charly_Wargnier]

I’ll fish for more info to understand that potential gap discrepancy, but for now, here’s CSS hack from our very own @snehankekre!

For 1.21.0, you can use this CSS hack to remove the top padding. Unsure what the unintended consequences are though elsewhere in the app:

st.markdown(
    """
<style>
div[class^="block-container"] {
    padding-top: 0rem;
}
</style>
""",
    unsafe_allow_html=True,
)

I hope that works for you.

Best,
Charly

[Shawn_Pereira]

Hi @Charly_Wargnier and @snehankekre, thank you for the code. I had struggled with it.

I do suggest that Streamlit factor in some cosmetic options for its widgets, that end users can use via code. Hacks can only go so far, and until the next version release. It stands to reason that if something is available via a hack, then it is possible to add it to the core product.

Thanks once again.

Cheers