# Change the position of a widget in a dashboard

**URL:** <https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289>\
**Category:** Dashboard\
**Created:** [22 May 2018 07:54 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289 "2018-05-22T07:54:48Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [12 October 2018 18:40 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/21 "2018-10-12T18:40:49Z")

</div>

> [@Georg25](#):
>
> it is still not completely invisible

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

Before:

 ![r-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/be433282423322ec92bf34b3bec03801885fa19b.png)

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

```auto
<style>

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

```

Result:

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8d5c14ed736bcebdde87f7fa90bb00c92a0e3866.png)

Flow:

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 October 2018 21:12 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/22 "2018-10-12T21:12:48Z")

</div>

😁 That works too

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [15 October 2018 06:11 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/23 "2018-10-15T06:11:05Z")

</div>

Thanks for help 😀

[Previous page](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289.md?page=1)