Search code examples
pythonbuttonstreamlit

Streamlit change button size in python


I have a program with an expander next to a button, but the button is smaller than the expander, and it bothers me a little. Is it possible to make the button bigger/make the expander's height smaller in only python. I have found solutions online using css, but I am just using python for my code.

Here is my code if anyone wants to look at it:

    instructionCol, buttonCol = st.columns([4,1])
    with instructionCol:
        with st.expander("Instructions"):
            st.write("Pretend these are the instructions.")
    with buttonCol:
        st.button("\nRestart\n", on_click=board.reset)

Here is also what it looks like:

st.expander and button are not aligned


Solution

  • You can use st.markdown(css, unsafe_allow_html=True) directly inside the Python code:

    import streamlit as st
    
    st.markdown(
        """
    <style>
    button {
        height: auto;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    </style>
    """,
        unsafe_allow_html=True,
    )
    
    instructionCol, buttonCol = st.columns([4,1])
    with instructionCol:
        with st.expander("Instructions"):
            st.write("Pretend these are the instructions.")
    with buttonCol:
        st.button("\nRestart\n", on_click=board.reset)
    

    It gives:

    Aligned button and st.expander

    Notice that the button is now aligned with the expander (because I made it a bit bigger). Since you have found css solutions already, you can replace the css I generated with the one you found.