Change the position of a widget in a dashboard

Dashboard
21

I guess a simpler solution is adding a template UI and set the CSS attribute opacity to 0.

Before:

r-02
r-021248×286 7.2 KB

Adding CSS styling to the UI template to be "hidden":

<style>

    #Tab1_Group_2 {
    opacity : 0;
    }
    
</style>

Result:

r-01
r-011295×308 7.33 KB

Flow:

[{"id":"51235c6b.bd5bb4","type":"tab","label":"Placeholder Group - opacity","disabled":false,"info":""},{"id":"1f8c8b.72033376","type":"function","z":"51235c6b.bd5bb4","name":"Create payload","func":"msg.payload = {key1:\"Earth\",key2:\"Wind\",key3:\"Fire\", key4:\"Water\", key5:\"Node-RED \"};\nreturn msg;","outputs":"1","noerr":0,"x":420,"y":220,"wires":[["84d4c64b.e1ace8"]]},{"id":"5a37cb53.0801a4","type":"inject","z":"51235c6b.bd5bb4","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":230,"y":220,"wires":[["1f8c8b.72033376"]]},{"id":"84d4c64b.e1ace8","type":"ui_template","z":"51235c6b.bd5bb4","group":"20ae1040.3cf58","name":"Text Panel 1","order":0,"width":"0","height":"0","format":"<style>\n\n    #tex1 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: red;\n    }\n    \n    #tex2 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: lime;\n    }\n    \n    #tex3 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: aqua;\n    }\n    \n    #tex4 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: white;\n    }\n    \n    #tex5 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: yellow;\n}\n    \n</style>\n\n\n<svg>\n\n\n<text id=\"tex1\" x=\"10\" y=\"10\" > {{msg.payload.key1}} </text>\n<text id=\"tex2\" x=\"10\" y=\"30\" > {{msg.payload.key2}} </text>\n<text id=\"tex3\" x=\"10\" y=\"50\" > {{msg.payload.key3}} </text>\n<text id=\"tex4\" x=\"10\" y=\"70\" > {{msg.payload.key4}} </text>\n<text id=\"tex5\" x=\"10\" y=\"90\" > {{msg.payload.key5}} </text>\n\n\n</svg>\n\n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":610,"y":220,"wires":[[]]},{"id":"51f9e3f1.c1c73c","type":"ui_template","z":"51235c6b.bd5bb4","group":"718559dc.b0a8d8","name":"Template with opacity","order":0,"width":0,"height":0,"format":"<style>\n\n    #Tab1_Group_2 {\n    opacity : 0;\n    }\n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":140,"wires":[[]]},{"id":"deb772b4.2eebf","type":"function","z":"51235c6b.bd5bb4","name":"Create payload","func":"msg.payload = {key1:\"Earth\",key2:\"Wind\",key3:\"Fire\", key4:\"Water\", key5:\"Node-RED \"};\nreturn msg;","outputs":"1","noerr":0,"x":420,"y":260,"wires":[["5aaf52ce.6acd8c"]]},{"id":"e1ed3cd3.08907","type":"inject","z":"51235c6b.bd5bb4","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":230,"y":260,"wires":[["deb772b4.2eebf"]]},{"id":"5aaf52ce.6acd8c","type":"ui_template","z":"51235c6b.bd5bb4","group":"edc01265.e6608","name":"Text Panel 3","order":0,"width":"0","height":"0","format":"<style>\n\n    #tex1 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: red;\n    }\n    \n    #tex2 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: lime;\n    }\n    \n    #tex3 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: aqua;\n    }\n    \n    #tex4 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: white;\n    }\n    \n    #tex5 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: yellow;\n}\n    \n</style>\n\n\n<svg>\n\n\n<text id=\"tex1\" x=\"10\" y=\"10\" > {{msg.payload.key1}} </text>\n<text id=\"tex2\" x=\"10\" y=\"30\" > {{msg.payload.key2}} </text>\n<text id=\"tex3\" x=\"10\" y=\"50\" > {{msg.payload.key3}} </text>\n<text id=\"tex4\" x=\"10\" y=\"70\" > {{msg.payload.key4}} </text>\n<text id=\"tex5\" x=\"10\" y=\"90\" > {{msg.payload.key5}} </text>\n\n\n</svg>\n\n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":610,"y":260,"wires":[[]]},{"id":"20ae1040.3cf58","type":"ui_group","z":"","name":"Group 1","tab":"6b520bda.e997a4","disp":true,"width":"6","collapse":false},{"id":"718559dc.b0a8d8","type":"ui_group","z":"","name":"Group 2","tab":"6b520bda.e997a4","disp":true,"width":"6","collapse":false},{"id":"edc01265.e6608","type":"ui_group","z":"","name":"Group 3","tab":"6b520bda.e997a4","disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard"}]
5 Likes
22

:grin: That works too

23

Thanks for help :grinning: