Search code examples
htmlcssstreamlit

Position first widget higher up

In streamlit, I am positioning the very first image logo like this:

with col1:
    st.image("logo.jpg", width = 300)

Problem is, the default first placement of a widget is too far low for my taste. So in this image:

enter image description here

The first element "NYC Ridesharing Data" is too low.

How do I move it up?

Solution

  • You can do it using st.markdown with unsafe_allow_html=True and modify the style of the component responsible for the padding at the top of the page. Css-wise, you need to set the padding-top of the class block-container to 0.

    import streamlit as st

st.set_page_config(layout="wide")

st.markdown("""
    <style>
        .block-container {padding-top: 0 !important;}
    </style>
    """,
    unsafe_allow_html=True,
)

col1, col2 = st.columns([5, 3])

with col1:
    st.title("Some cute cat")
    st.slider("Select hour of pickup")
    st.image("https://static.streamlit.io/examples/cat.jpg", width=300)

with col2:
    st.markdown("Some text and a cute picture of a dog")
    st.image("https://static.streamlit.io/examples/dog.jpg")

with st.container():
    st.markdown("Here is a container")

    It gives:

    No padding at the top