We don't need more parameters in widgets; we need more IDs

TL:DR: If streamlit widgets had independent ids for each widget, CSS styling would be much easier.

Have you ever tried to style one of the widgets of the same type in a different way than the others? If yes, you are probably feeling the pain. There are some solutions to this issue, but waaay to hacky.

Imagine a world where each widget would get a separate ID. Let’s say that you added two expanders to your app, then in the HTML you would have:

(...)
<div data-testid="stExpander" id="stExpander1" class="css-1fcdlhc e1s6o5jp0">
(...)
<div data-testid="stExpander" id="stExpander2" class="css-1fcdlhc e1s6o5jp0">

With that, modifying the CSS would be a dream:

div[id="stExpander1"] div[role="button"] p {

    font-size: 12rem;
    color: pink;
}


div[id="stExpander2"] div[role="button"] p {

    font-size: 6rem;
    color: greenyellow;
}

Effect:

Discussion:

  1. What do you think? :slight_smile:
  2. Was it discussed before? What cons and pros were identified?
  3. If the answer to point 2 is ‘yes’, could you share some links?
  4. Is title of this post a little clickbait-y? :wink:

Anyone interested in this: make sure to vote on the GitHub feature requests for it:

They are basically the same thing, but slightly different focus was given to IDs vs classes in their OPs…I think both or either would be an improvement as I wrote in #3888.

1 Like

Hi @mathcatsand! Thank you very much for pointing out GitHub feature requests. It really would be great to have such a feature implemented.

1 Like

Since Streamlit’s number one feature is its low barrier to entry, I agree that easing the addition of custom css would fit well with that philosophy. If we can easily tweak the display with css, it would keep the barrier to entry just as low for people who need just that little extra tweak.

1 Like