Display label above/below icon

#1

Probably a newbie question, but how could I display the label above or below the icon for a button/switch?

0 Likes

#2

Quick question, quick answer..... with standard dashboard switches not, unless you make a trick using a text box + switch or a template.

Regards

0 Likes

#3

This is what I have right now, a switch and a slider to control a hue bulb.

image

I would like for the label to show above the icon. I'm guessing the best way to do that is with template (would be cool to combine both switch and slider into one button, is that even possible?).

Could someone give me an example? (I've just started using node-red yesterday)

0 Likes

#4

I did it in same line but I guess you could do the same adding on first line of the dashboard the switches and on the line below text box with the names.

image

In my case I use one switch per line made by Icon(bulb) + standard switch + ICON (led)

Regards

0 Likes

#5

DIsregard my previous post if you read it before. Edited to correct.

r-001

Code:

[{"id":"4ea8f239.42877c","type":"tab","label":"Switch and icon together","disabled":false,"info":""},{"id":"cdb14e6e.07d9d","type":"change","z":"4ea8f239.42877c","name":"Description","rules":[{"t":"set","p":"topic","pt":"msg","to":"Alarm","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":220,"wires":[["f04373f3.eab1b"]]},{"id":"f04373f3.eab1b","type":"ui_text","z":"4ea8f239.42877c","group":"9e2bac96.b321b","order":2,"width":"2","height":"1","name":"Alarm","label":"","format":"<center><font color={{(msg.payload?\"red\":\"grey\")}}><i class=\"fa fa-lightbulb-o fa-2x\"></i></font><br><font size=\"-2\">{{msg.topic}}</font></center>","layout":"col-center","x":534.444507598877,"y":221.11111450195312,"wires":[]},{"id":"292aefee.0c69a","type":"ui_switch","z":"4ea8f239.42877c","name":"","label":"","group":"9e2bac96.b321b","order":0,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":190,"y":220,"wires":[["cdb14e6e.07d9d"]]},{"id":"3ab819fe.c9af96","type":"change","z":"4ea8f239.42877c","name":"Description","rules":[{"t":"set","p":"topic","pt":"msg","to":"Alarm","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":320,"wires":[["b18b9744.59f678"]]},{"id":"b18b9744.59f678","type":"ui_text","z":"4ea8f239.42877c","group":"e0e6934.ab83e7","order":2,"width":"1","height":"1","name":"Alarm","label":"","format":"<font size=\"-2\">{{msg.topic}}</font><font color={{(msg.payload?\"red\":\"grey\")}}><i class=\"fa fa-lightbulb-o fa-2x\"></i>","layout":"row-left","x":534.444507598877,"y":321.1111145019531,"wires":[]},{"id":"f596f705.ac6a88","type":"ui_switch","z":"4ea8f239.42877c","name":"","label":"","group":"e0e6934.ab83e7","order":0,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":190,"y":320,"wires":[["3ab819fe.c9af96"]]},{"id":"9e2bac96.b321b","type":"ui_group","z":"","name":"S1","tab":"62712bbf.888b94","disp":true,"width":"2","collapse":false},{"id":"e0e6934.ab83e7","type":"ui_group","z":"","name":"S2","tab":"62712bbf.888b94","disp":true,"width":"2","collapse":false},{"id":"62712bbf.888b94","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
0 Likes