Something strange when using st.form_submit_button

Using Streamlit
1

hi all:
I am trying to change the font-size of form_submit_button

analyze = st.form_submit_button("Analyze", use_container_width=True)

I using the css style below:

st.markdown(
        """
        <style>
        .stFormSubmitButton>button {
            font-size:20px !important;
            background-color: #02ab21;
            color: black; 
            margin: 0 auto;
            height: 100px; 
        }
        .big-font {
            font-size:20px !important;
        }
        .stFormSubmitButton>button:hover {
            background-color: purple;
            color: black;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

all parameters were accepted except the font-size。but when I add some strange string words into label, font-size start work

analyze = st.form_submit_button("<p>Analyze", use_container_width=True)

demo is runing on streamlit_app (github.dev)

complete demo code:

import streamlit as st

st.title("🎈 My new app")

st.markdown(
        """
        <style>
        .stFormSubmitButton>button {
            font-size:40px;
            background-color: #02ab21;
            color: black;
            margin: 0 auto;
            height: 100px;
        }
        .stFormSubmitButton>button:hover {
            background-color: purple;
            color: black;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

with st.form("test"):
    st.form_submit_button('testString')
    st.form_submit_button('<p>testString')
  • python version:3.11.10
  • streamlit version:1.39.0

if anyone can help that would be appreciated.

2

Huh, that is strange – it appears that by adding <p> you change the structure of the button object slightly – for the testString one, it has a <p> tag inside of it, but for the <p>testString one, it’s just in a div. That looks to me like it’s a bug somewhere, but thankfully there’s an easy fix that works for both:

st.markdown(
    """
        <style>
        .stFormSubmitButton>button {
            font-size:40px;
            background-color: #02ab21;
            color: black;
            margin: 0 auto;
            height: 100px;
            /* NEW */
            p {
                font-size: 40px;
            }
        }
        .stFormSubmitButton>button:hover {
            background-color: purple;
            color: black;
        }
        </style>
        """,
    unsafe_allow_html=True,
)

Adding the nested p in the css makes sure that the font size is set properly on the paragraph tag inside of the button tag.

3

thanks @blackary for reply, it worked, maybe I could open a new issue on official github

4

Yes, I think it’s worth reporting that strange behavior as a bug, because adding <p> in the button text certainly should not affect the generated HTML.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.