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)
Dashboard (After overlay effect)
Dashboard (Overlay effect run off)
div of dashboard
My template node
[{"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.
