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

mathcatsand · January 26, 2023, 6:24am

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

Give each element a unique HTML `id`

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.**

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.

Topic		Replies	Views
Assign id to widget HTML block 🎈 Using Streamlit	5	795	December 1, 2023
Feature idea: Setting "id" and "class" tag for Streamlit elements 🎈 Using Streamlit	3	4333	October 12, 2023
Implement a way to add CSS selector for all widgets 🎈 Using Streamlit	3	742	July 27, 2023
Widget layout 🎈 Using Streamlit	3	962	October 6, 2022
Experiments with styling and layout hacks 💬 Show the Community! css	2	1010	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