TomJohn
January 26, 2023, 12:32am
1
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?
Anyone interested in this: make sure to vote on the GitHub feature requests for it:
opened 08:31AM - 08 Oct 21 UTC
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.**
opened 09:44AM - 28 Sep 22 UTC
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 .
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
