Page 1 of 1

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

Posted: Fri Apr 07, 2023 6:50 am
by IoTStudio Support
from
orginal
orginal
before.PNG (3.02 KiB) Viewed 6959 times
to
add counter
add counter
after.PNG (4.35 KiB) Viewed 6959 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}]