[IoTStudio Dashboard] The Dropdown how to add item counter?
Posted: Fri Apr 07, 2023 6:50 am
from
to
we use the CSS counter, you can reference the w3cschools link : https://www.w3schools.com/CSS/css_counters.asp
add the below CSS code into template node
The flow example:
- orginal
- before.PNG (3.02 KiB) Viewed 53294 times
- add counter
- after.PNG (4.35 KiB) Viewed 53294 times
add the below CSS code into template node
Code: Select all
<style id="AddCSSCounter">
.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu {
counter-reset: list-number;
}
md-option .md-text:before {
counter-increment: list-number;
content: counter(list-number);
margin-right: 10px;
width:35px;
height:35px;
display:inline-flex;
align-items:center;
justify-content: center;
font-size:16px;
background-color: rgb(255 255 255);
border-radius:50%;
color:#000;
}
</style>Code: Select all
[{"id":"c314559311068435","type":"tab","label":"Dropdown add Counter","disabled":false,"info":"","env":[]},{"id":"91e77289abbbe174","type":"ui_dropdown","z":"c314559311068435","name":"","label":"","tooltip":"","place":"Select option","group":"2096c0c6.23221","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":520,"y":100,"wires":[[]]},{"id":"f651e128f318694e","type":"inject","z":"c314559311068435","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"options","v":"[\"Choice 1\",\"Choice 2\",{\"Choice 3\":\"3\"}]","vt":"json"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":100,"wires":[["91e77289abbbe174"]]},{"id":"53147d87c754c537","type":"ui_template","z":"c314559311068435","group":"2096c0c6.23221","name":"","order":2,"width":0,"height":0,"format":"<style id=\"AddCSSCounter\">\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu {\n counter-reset: list-number;\n}\n\nmd-option .md-text:before {\n counter-increment: list-number;\n content: counter(list-number);\n margin-right: 10px;\n width:35px;\n height:35px;\n display:inline-flex;\n align-items:center;\n justify-content: center;\n font-size:16px;\n background-color: rgb(255 255 255);\n border-radius:50%;\n color:#000;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":160,"wires":[[]]},{"id":"2096c0c6.23221","type":"ui_group","name":"Default","tab":"2b0ed5b4.6092ca","order":1,"disp":true,"width":"6","collapse":false},{"id":"2b0ed5b4.6092ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]