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

Usage of IoT Studio includes Development Mode, Service Mode, Multi-user Account and Policies, Web Service Remote Control and Security Settings.

Moderator: IoTStudio Support

Post Reply
IoTStudio Support
Posts: 39
Joined: Wed Nov 23, 2022 9:26 am

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

Post by IoTStudio Support »

from
orginal
orginal
before.PNG (3.02 KiB) Viewed 12199 times
to
add counter
add counter
after.PNG (4.35 KiB) Viewed 12199 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}]
Best Regards,
IoT Studio Support Team
Post Reply