[IoTStudio Dashboard] The Dropdown how to add item counter?

[IoTStudio Support]

from

orginal

before.PNG (3.02 KiB) Viewed 11868 times

to

add counter

after.PNG (4.35 KiB) Viewed 11868 times

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

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>

The flow example:

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}]