adjusting button height

Custom Components
1

I have some LED like emojis rendered as clickable buttons using st.button. I can adjust the spacing between them using st.columns. But I am not able to adjust the height of the buttons. It seems to put unwanted paddding on top and bottom of the emoji. I want to put a strip of LEDs and right below that another strip with very little (max 2 or 3 pixels) between the strips.

   emoji = self.STATUS_EMOJI.get(self.state, "⚫")
    # st.markdown(f"<div title='{self.tooltip}' style='display:inline-block; margin-right:6px;'>{emoji}</div>", unsafe_allow_html=True)
    button_label = f"{emoji}"  # Keep it minimal for cockpit-style layout

    inject_led_css()
    if st.button(button_label, key=f"led_{self.label}", help=self.tooltip, type="tertiary"):
        show_led_dialog(self.label, self.state, self.detail_msg)
        print(f"\n\nLED {self.label} with state {self.state} rendered as a clickable button.")

def inject_led_css():
css = “”"

button {
font-size: 3px;
padding-top: 2px !important;
padding-bottom: 2px !important;
}

“”"
st.markdown(css, unsafe_allow_html=True)

2

Hi @Ray_Hari

You could probably do something like this:

b_css = """
        .st-key-b1 {
                      p {
                      padding: 50px;
                      color: red;
                      font-size: 25px;
                      }
                    }
        """

st.html(f"<style>{b_css}</style>")

st.button("Button 1", key='b1')
st.button("Button 2", key='b2')

Cheers

PS: I used Streamlit 1.45.1

3

Thank you Shawn. Though that particular css did not do the trick, it gave me some ideas. I did an ‘inspect Q’ in the browser window, that showed me all the divs, and css applied in forming those stButtons. I played around with some of those values and came up with the following.

Set the min-height for the particular type of button.

    st.markdown("""
            <style>
            button[data-testid="stBaseButton-tertiary"] {
            min-height: 1rem;
            }
            </style>
            """, unsafe_allow_html=True)

Then in my st.container set the 'gap' to 1rem, and in the inner container with the LED strips set the gap and margin to 0 as follows.

    def render(self):
        if self.strips:
            with st.container(key="pirhocheck_panel", border=True):
                st.markdown("""
                    <style>
                    .st-key-pirhocheck_panel { 
                        background-color: #001122 !important;
                        gap: 1rem;
                    }
                    </style>
                """, unsafe_allow_html=True)
                st.markdown("#### PiRhoCheck Panel")
                with st.container(key="led_strips", border=False):
                    st.markdown("""
                        <style>
                        .st-key-led_strips { 
                            gap: 0rem;
                            margin: 0px !important;
                        }
                        </style>
                    """, unsafe_allow_html=True)

                    for strip in self.strips:
                        strip.render()
4

Oh, the code snippet I sent you, worked for me in v1.45 as well as v1.49. Nevertheless, its great that you arrived at your solution :slight_smile:

Cheers