Button Size in Sidebar

💬 Show the Community!
1

Hello Together :),
I would like to place a few buttons under each other in the sidebar. Since these have different text lengths as labels, I wanted to ask if you can adjust the width of these buttons.
I have already seen that there are themes or the .css variant. However, all buttons are adjusted here. I want to adjust only those that are found in the sidebar. Is there a solution for this?

Thanks a lot!
Max

2

Hi @matix42 are these the droids you’re looking for?

image
image952×581 6.91 KB

streamlit app:

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

local_css("style.css")

with st.sidebar:
    st.button("button sidebar 1")
    st.button("button sidebar longer text")
    st.button("button sidebar 2")
    st.button("button sidebar 3")

st.button("button page 1")
st.button("button longer text page")
st.button("button page 2")
st.button("button page 3")

external css:

section[data-testid="stSidebar"] div.stButton button {
    background-color: brown;
    width: 200px;
}
1 Like
3

Good Morning Tom,

perfect! That is exactly what I am looking for.
Thank you!

Max

4

is there also a way to align the text on the left side?
text-align: left
unfortunately isn’t working.

Thank you in advance
Max :slight_smile:

5

In this case you will need:

justify-content: left;

In general, Chrome has some great developer tools that let you to see elements properties and styling. It’s my way to go when I am trying to inspect & change streamlit styling.

image

Effect of the change:

image
image978×339 6.69 KB

1 Like
6

ah i see. Nice Tip with the chrome developer tools!
Thank you.

1 Like