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

TomJohn · January 26, 2023, 12:32am

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:

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

mathcatsand · January 26, 2023, 6:24am

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

github.com/streamlit/streamlit

Give each element a unique HTML `id`

opened 08:31AM - 08 Oct 21 UTC

Tooblippe

type:enhancement area:styling

HI, Is it possible to give each of the elements on the page a unique html id?… Would make targering an element a lot easier. I love streamlit by the way! --- Community voting on feature requests enables the Streamlit team to understand which features are most important to our users. **If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**

github.com/streamlit/streamlit

Widget attribute to hook into for custom CSS

opened 09:44AM - 28 Sep 22 UTC

daveycope

type:enhancement area:ux/ui area:styling

### Problem st.markdown is great for getting under the hood of the generated …html. There are some pre-defined IDs under the "data-testid" nomenclature which are fine if you need to target those, but not everything has IDs and being able to add our own would clash with the internal ones at some point. What would be good is to be able to add a user defined class name into the attributes of an existing widget. Then, using CSS via st.markdown target that class for styling. For example, this st.metric; ``` st.metric( label = "Hard Stops", value = "5", delta = "3") ``` creates this html for the value; ``` <div class="css-50ug3q e16fv1kl3"> 5 </div> ``` ### Solution If it was possible to add _optional_ **pass through** class names for each widget this may provide a solution for those who wish to add custom styling. For example this to illustrate my point; ``` st.metric( label = "Hard Stops", value = "5", delta = "3", class = "my-class" ) ``` with the result being; ``` <div class="css-50ug3q e16fv1kl3 my-class"> 5 </div> ``` If each widget attribute maps onto a attribute-class naming schema so that your html generator can splice into the correct element then we could also have multiple class targets; ``` st.metric( label = "Hard Stops", label-class = "my-label-class" value = "5", delta = "3", value-class = "my-value class" ) ``` ``` <label data-testid="stMetricLabel" class="css-186pv6d e16fv1kl2 my-label-class"> <div class="css-50ug3q e16fv1kl3">Hard Stops</div> </label> <div data-testid="stMetricValue" class="css-1xarl3l e16fv1kl1"> <div class="css-50ug3q e16fv1kl3 my-value-class"> 7 </div> </div> ``` Thanks for your time! ### Voting for feature requests Community voting on feature requests enables the Streamlit team to understand which features are most important to our users. **If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**

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.

TomJohn · January 26, 2023, 6:04pm

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

mathcatsand · January 26, 2023, 6:26pm

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.

system · January 26, 2024, 6:27pm

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

Topic		Replies	Views
Assign id to widget HTML block 🎈 Using Streamlit	5	788	December 1, 2023
Feature idea: Setting "id" and "class" tag for Streamlit elements 🎈 Using Streamlit	3	4302	October 12, 2023
Implement a way to add CSS selector for all widgets 🎈 Using Streamlit	3	738	July 27, 2023
Widget layout 🎈 Using Streamlit	3	960	October 6, 2022
Experiments with styling and layout hacks 💬 Show the Community! css	2	1006	April 22, 2023

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

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies