Ng-if doesn't disable the element

Dashboard
1

Hi all.
I'm using the directive "ng-if" in order to hide and totally disable an element (button in my case).
The problem is the following: if the ng-if condition is "false" the element (button) is hidden but it isn't totally disabled. In other words it is hidden but seems that it continues to occupy the original dashboard "space" (occupied when it's shown).
This means that, in case of "false" ng-if condition, in my dashboard there is a blank space, i.è the other (active) elements don't occupy the blank ng-if element space.
How can I fix my issue?

Thanks a lot in advance.
Paolo

2

Try setting the size to 0x0.

Not tested, just an idea.

3

Ok, it works only if i set "auto" the dimension of template node.
Setting to "auto" the template node dimension, I have another problem: I can't put in the same row the two button. Could you help me?
Here attach the flow. thanks a lot

[{"id":"3d62e5e4.f1c52a","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"d5bbd082.f5d26","type":"comment","z":"3d62e5e4.f1c52a","name":"OUTPUT","info":"","x":346.6666564941406,"y":175,"wires":[]},{"id":"114967f4.0f0428","type":"ui_template","z":"3d62e5e4.f1c52a","group":"c007f24.583101","name":"OUTStyle","order":10,"width":"1","height":"1","format":"<style>\n    .outButtonON {\n\t\t/*color : rgb(46, 46, 46);*/\n\t\t/*background-color: rgb (255, 222, 121);*/\n\t\t/*padding: 0px;*/\n\t\t/*margin: 0px 0px 0px 0px;*/\n\t\t/*width: 75px;*/\n\t\t/*height: 75px;*/\n\t\t/*padding: 0px;*/\n\t\t/*text-align: left;*/\n\t\t/*text-decoration:none;*/\n\t\t/*border: none;*/\n\t\t/*outline: none;*/\n\t\t/*margin-bottom: 5px;*/\n\t\t/*margin-left: -10px;*/\n\t\t/*margin-top: 16px;*/\n\t\t/*position: relative !important; */\n\t\t/*position: absolute;*/\n\t\t/*top: 3px;*/\n\t\t/*left: 0px;*/\n\t\t/*position-anchor: 0px 0px;*/\n\t\tborder: 5px solid green;\n\t} \n    \n    .outButtonOFF {\n\t\t/*color : rgb(46, 46, 46);*/\n\t\t/*background-color: rgb (255, 222, 121);*/\n\t\t/*padding: 0px;*/\n\t\t/*margin: 0px 0px 0px 0px;*/\n\t\t/*width: 75px;*/\n\t\t/*height: 75px;*/\n\t\t/*padding: 0px;*/\n\t\t/*text-align: left;*/\n\t\t/*text-decoration:none;*/\n\t\t/*border: none;*/\n\t\t/*outline: none;*/\n\t\t/*margin-bottom: 5px;*/\n\t\t/*margin-left: -10px;*/\n\t\t/*margin-top: 16px;*/\n\t\t/*position: relative !important; */\n\t\t/*position: absolute;*/\n\t\t/*top: 3px;*/\n\t\t/*left: 0px;*/\n\t\t/*position-anchor: 0px 0px;*/\n\t\tborder: 0px solid red;\n\t} \n    \n    .OutName  { \n    font: bold 22px sans-serif; \n    fill: darkgreen; \n    /*text-align: center;*/\n    /*text-transform: lowercase;*/\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":348.0952568054199,"y":216.90484046936035,"wires":[[]]},{"id":"4ed91b15.08c314","type":"ui_template","z":"3d62e5e4.f1c52a","group":"c007f24.583101","name":"OUT1","order":1,"width":"0","height":"0","format":"<div>\n\t<md-button ng-show=\"msg.Out1ShowButton==='enabled'\" class=\"md-raised {{msg.Out1OnorOff}}\" ng-click=\"send({Out1Toggle:'changeStatus'})\">\n\t<svg width=\"120\" height=\"120\">\n\t\t    <image ng-if=\"msg.Out1OnorOff==='outButtonON'\" x=\"22\" y=\"0\" width=\"77\" height=\"90\" preserveAspectRatio=\"xMidYMid meet\"/>\n\t\t\t<image ng-if=\"msg.Out1OnorOff==='outButtonOFF'\" x=\"25\" y=\"-4\" width=\"65\" height=\"95\" preserveAspectRatio=\"xMidYMid meet\"/>\n\t\t    <text x=\"15\" y=\"110\" class=\"OutName\">{{msg.Out1Label}}</text>\n\t\t</svg>\t\n\t</md-button>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":881.1467456817627,"y":398.6751012802124,"wires":[["d7a3b5d7.5251a8"]]},{"id":"87e717b1.66a1f8","type":"function","z":"3d62e5e4.f1c52a","name":"Output1MNG","func":"var Out1OnorOff = flow.get('flow_Out1OnorOff') || 'outButtonOFF';\nvar out1Flag = global.get(\"global_out1Flag\");\nvar out1Name = global.get(\"global_out1Name\");\nvar Out1ShowButton = global.get(\"global_Out1ShowButton\")|| 'inhibit';\nvar OutputShowOrHide =  global.get(\"global_OutputShowOrHide\"); //settato dall'utente dall'impostazioni dashboard\n\n\nif ((Out1ShowButton===\"inhibit\")&&(OutputShowOrHide===\"OutputShow\")&&(out1Flag===\"true\"))\n{\n    Out1ShowButton = \"enabled\";\n}\nelse\n{\n    if (Out1ShowButton===\"enabled\")\n    {\n        if ((OutputShowOrHide===\"OutputHide\")||(out1Flag===\"false\"))\n        {\n            Out1ShowButton = \"inhibit\";\n        }\n    }\n}\n\nglobal.set(\"global_Out1ShowButton\", Out1ShowButton);\n\n\nmsg.Out1ShowButton = Out1ShowButton;\nmsg.Out1OnorOff = Out1OnorOff;\nmsg.Out1Label = out1Name;\n\n\nreturn msg;\n","outputs":1,"noerr":0,"x":632.5398254394531,"y":398.0689835548401,"wires":[["4ed91b15.08c314"]]},{"id":"bbd046e6.208da8","type":"inject","z":"3d62e5e4.f1c52a","name":"","topic":"refreshButton","payload":"","payloadType":"str","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":314.01854705810547,"y":521.5134010314941,"wires":[["87e717b1.66a1f8","758985c0.08c69c"]]},{"id":"d7a3b5d7.5251a8","type":"function","z":"3d62e5e4.f1c52a","name":"Out1changeStatusMNG","func":"var Out1OnorOff = flow.get('flow_Out1OnorOff');\n\nif (msg.Out1Toggle === \"changeStatus\")\n{\n    if (Out1OnorOff === \"outButtonON\")\n    {\n        Out1OnorOff = \"outButtonOFF\";\n        msg.payload = false;\n    }\n    else\n    {\n        Out1OnorOff = \"outButtonON\";\n        msg.payload = true;\n    }\n\n    flow.set('flow_Out1OnorOff',Out1OnorOff )\n    return msg; //serve solo per triggerare\n}\n\n","outputs":1,"noerr":0,"x":748.6507415771484,"y":245.8465700149536,"wires":[["87e717b1.66a1f8","55f5e873.b664a8"]]},{"id":"55f5e873.b664a8","type":"rpi-gpio out","z":"3d62e5e4.f1c52a","name":"","pin":"11","set":"","level":"0","freq":"","out":"out","x":1219.5537490844727,"y":248.39287567138672,"wires":[]},{"id":"ffc310fb.2a55b","type":"ui_template","z":"3d62e5e4.f1c52a","group":"c007f24.583101","name":"OUT2","order":3,"width":"0","height":"0","format":"<div>\n\t<md-button ng-show=\"msg.Out2ShowButton==='enabled'\" class=\"md-raised {{msg.Out2OnorOff}}\" ng-click=\"send({Out2Toggle:'changeStatus'})\">\n\t\t<svg width=\"120\" height=\"120\">\n\t\t    <image ng-if=\"msg.Out2OnorOff==='outButtonON'\" x=\"22\" y=\"0\" width=\"77\" height=\"90\" preserveAspectRatio=\"xMidYMid meet\"/>\n\t\t\t<image ng-if=\"msg.Out2OnorOff==='outButtonOFF'\" x=\"25\" y=\"-4\" width=\"65\" height=\"95\" preserveAspectRatio=\"xMidYMid meet\"/>\n\t\t    <text x=\"15\" y=\"110\" class=\"OutName\">{{msg.Out2Label}}</text>\n\t\t</svg>\n\t</md-button>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":858.4523010253906,"y":703.0950050354004,"wires":[["5d119baf.598604"]]},{"id":"758985c0.08c69c","type":"function","z":"3d62e5e4.f1c52a","name":"Output2MNG","func":"var Out2OnorOff = flow.get('flow_Out2OnorOff') || 'outButtonOFF';\nvar out2Flag = global.get(\"global_out2Flag\");\nvar out2Name = global.get(\"global_out2Name\");\nvar Out2ShowButton = global.get(\"global_Out2ShowButton\")|| 'inhibit';\nvar OutputShowOrHide =  global.get(\"global_OutputShowOrHide\"); //settato dall'utente dall'impostazioni dashboard\n\n\nif ((Out2ShowButton===\"inhibit\")&&(OutputShowOrHide===\"OutputShow\")&&(out2Flag===\"true\"))\n{\n    Out2ShowButton = \"enabled\";\n}\nelse\n{\n    if (Out2ShowButton===\"enabled\")\n    {\n        if ((OutputShowOrHide===\"OutputHide\")||(out2Flag===\"false\"))\n        {\n            Out2ShowButton = \"inhibit\";\n        }\n    }\n}\n\nglobal.set(\"global_Out2ShowButton\", Out2ShowButton);\n\n\nmsg.Out2ShowButton = Out2ShowButton;\nmsg.Out2OnorOff = Out2OnorOff;\nmsg.Out2Label = out2Name;\n\n\nreturn msg;\n","outputs":1,"noerr":0,"x":609.845380783081,"y":702.4888873100281,"wires":[["ffc310fb.2a55b"]]},{"id":"5d119baf.598604","type":"function","z":"3d62e5e4.f1c52a","name":"Out2changeStatusMNG","func":"var Out2OnorOff = flow.get('flow_Out2OnorOff');\n\nif (msg.Out2Toggle === \"changeStatus\")\n{\n    if (Out2OnorOff === \"outButtonON\")\n    {\n        Out2OnorOff = \"outButtonOFF\";\n        msg.payload = false;\n    }\n    else\n    {\n        Out2OnorOff = \"outButtonON\";\n        msg.payload = true;\n    }\n\n    flow.set('flow_Out2OnorOff',Out2OnorOff )\n    return msg; //serve solo per triggerare\n}\n\n","outputs":1,"noerr":0,"x":725.9562969207764,"y":550.2664737701416,"wires":[["758985c0.08c69c","68c485d.21f7d7c","9ad97182.ee46"]]},{"id":"68c485d.21f7d7c","type":"rpi-gpio out","z":"3d62e5e4.f1c52a","name":"","pin":"13","set":"","level":"0","freq":"","out":"out","x":1196.8593044281006,"y":552.8127794265747,"wires":[]},{"id":"9ad97182.ee46","type":"debug","z":"3d62e5e4.f1c52a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1037.410659790039,"y":635.5951118469238,"wires":[]},{"id":"c007f24.583101","type":"ui_group","z":"","name":"Outputs","tab":"4b0c78d9.193098","order":5,"disp":false,"width":"7","collapse":false},{"id":"4b0c78d9.193098","type":"ui_tab","z":"","name":"HOME/LAVORO","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
4

It seems as if I have the same problem but setting the dimension of the template node to auto doesn't helped. Even so setting width and height of the div to 0x0 or auto. That's my flow:

[{"id":"4908e9f4.3b0eb8","type":"tab","label":"Haushalt","disabled":false,"info":""},{"id":"ef4a66.cf651598","type":"sqlite","z":"4908e9f4.3b0eb8","mydb":"928d1f20.39874","sqlquery":"fixed","sql":"SELECT hId, hTodo, hIcon FROM haushalt where hLast < current_Date;","name":"SmartyPi getTodo","x":370,"y":120,"wires":[["a6c876c9.41757"]]},{"id":"a6c876c9.41757","type":"ui_template","z":"4908e9f4.3b0eb8","group":"3674240e.411144","name":"Buttons Daily","order":0,"width":0,"height":0,"format":"<!-- Add icon library -->\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n \n<!-- Style buttons -->\n <style>\n.btn {\n  background-color: #0094ce; \n  border: none; \n  color: white; \n  padding: 5px 5px; \n  font-size: 16px;\n  cursor: pointer; \n}\n\n.btn:hover {\n  background-color: #00aaed;\n}\n\n.nextButton {\n    float: left;\n    padding-left: 5px;\n} \n</style>\n\n<div>\n<div ng-repeat=\"row in msg.payload\" class=\"nextButton\">\n<button class=\"btn\" title={{row.hTodo}}  style=\"height: 35px; width: 35px;\"><i class=\"material-icons\" ng-click=\"send({payload: row.hId})\">{{row.hIcon}}</i></button>\n</div>\n</div>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":610,"y":140,"wires":[["84f0b0fa.c2c888"]]},{"id":"cd41a4c6.5c9bf","type":"sqlite","z":"4908e9f4.3b0eb8","mydb":"928d1f20.39874","sqlquery":"fixed","sql":"SELECT uId, uName, uIcon FROM user;","name":"SmartyPi getUser","x":490,"y":40,"wires":[["84f0b0fa.c2c888"]]},{"id":"bbafd8ef.362c08","type":"inject","z":"4908e9f4.3b0eb8","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":80,"wires":[["ef4a66.cf651598","72855e8d.015038"]]},{"id":"f5c21147.2884c8","type":"ui_template","z":"4908e9f4.3b0eb8","group":"3674240e.411144","name":"","order":2,"width":"0","height":"0","format":"<!-- Add icon library -->\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n \n<!-- Style buttons -->\n <style>\n.btn {\n  background-color: #0094ce; \n  border: none; \n  color: white; \n  padding: 5px 5px; \n  font-size: 16px;\n  cursor: pointer; \n}\n\n.btn:hover {\n  background-color: #00aaed;\n}\n\n.nextButton {\n    float: left;\n    padding-left: 5px;\n} \n\n</style>\n\n<div class=\"dialog\">\n<div ng-if=\"msg.payload[2]\">    \n<div ng-repeat=\"row in msg.payload[1]\" class=\"nextButton\">\n<button class=\"btn\" title={{row.uName}}  style=\"height: 35px; width: 35px;\"><i class=\"material-icons\" ng-click=\"send({getid: row.uId})\">{{row.uIcon}}</i></button>\n</div>\n</div>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1020,"y":140,"wires":[[]]},{"id":"72855e8d.015038","type":"delay","z":"4908e9f4.3b0eb8","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":300,"y":40,"wires":[["cd41a4c6.5c9bf"]]},{"id":"84f0b0fa.c2c888","type":"join","z":"4908e9f4.3b0eb8","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":810,"y":140,"wires":[["f5c21147.2884c8"]]},{"id":"928d1f20.39874","type":"sqlitedb","z":"","db":"/home/pi/smartyPi/database/smartyPi.sqlite","mode":"RWC"},{"id":"3674240e.411144","type":"ui_group","z":"","name":"Daily Todo","tab":"f851193c.456508","order":1,"disp":true,"width":"6","collapse":false},{"id":"f851193c.456508","type":"ui_tab","z":"","name":"Haushalt","icon":"home","order":1,"disabled":false,"hidden":false}]

Maybe you have an idea?!

Thanks for help - Sanne

5

Hello again,

I solved the problem by using JS-DOM manipulation.

Thanks for the help, even I changed the solution statement.
Greetz Sanne