# Problem to create a overlay effect

**URL:** <https://discourse.nodered.org/t/problem-to-create-a-overlay-effect/22694>\
**Category:** Dashboard\
**Created:** [6 March 2020 09:32 UTC](https://discourse.nodered.org/t/problem-to-create-a-overlay-effect/22694 "2020-03-06T09:32:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)\
**Post date:** [6 March 2020 09:32 UTC](https://discourse.nodered.org/t/problem-to-create-a-overlay-effect/22694/1 "2020-03-06T09:32:46Z")

</div>

Greetings,

I had tried to do for a overlay effect on my node red dashboard to show disconnection. The method I do is using a template node and paste javascript code. And my problem is the overlay effect will run off when i changing or smaller the window size.(Because I fix the div top :62px)  
Then, I realized that all the dashboard ui\_node will auto re-align even when changing the window size. So, I would like to know is there a way to change my position of overlay effect to be auto aligned? Thank you.

_My overlay effect must be below the tab_  
Dashboard (Before overlay effect)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a13dd2c29660ec0c2086559a4c459dabe1b32d2b.png)

Dashboard (After overlay effect)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d70a28a23ec04ad8bb795d0ce7df548c859437d3.png)

Dashboard (Overlay effect run off)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd46da7787cf851d823e15a19979d6dd9a2a5d2e.png)

div of dashboard

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ff016a730c3c83d27931f187538c2ffa9e4070f5.png)

My template node

```auto
[{"id":"382409e8.bfcbf6","type":"ui_template","z":"1179c02c.8bd94","group":"b5e79b09.ecf918","name":"","order":1,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n#overlay {\n position: fixed;\n display: none;\n width: 100%;\n height: 100%;\n top: 62.3px;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0,0,0,0.5);\n z-index: 2;\n cursor: pointer;\n}\n</style>\n</head>\n<body>\n\n<div id=\"overlay\" onclick=\"off()\"><P>Disconnected</P></div>\n\n<div style=\"padding:15px\">\n <button onclick=\"on()\">Turn on overlay effect</button>\n</div>\n\n<script>\nfunction on() {\n document.getElementById(\"overlay\").style.display = \"block\";\n}\n\nfunction off() {\n document.getElementById(\"overlay\").style.display = \"none\";\n}\n</script>\n\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":163.01136016845703,"y":85.70452785491943,"wires":[[]]},{"id":"b5e79b09.ecf918","type":"ui_group","z":"","name":"Home Tab","tab":"17e9a199.e6769e","order":1,"disp":true,"width":"6","collapse":false},{"id":"17e9a199.e6769e","type":"ui_tab","z":"","name":"S7-1200","icon":"desktop_windows","order":4,"disabled":false,"hidden":false}]

```

Best Regards.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 April 2020 01:05 UTC](https://discourse.nodered.org/t/problem-to-create-a-overlay-effect/22694/3 "2020-04-08T01:05:50Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.