Hi everyone, is there a way to make the popup as well as the OK and Cancel buttons larger in the Dashboard Notification OK\Cancel dialog?
You will need to dig into the CSS, I think that just about everything is adjustable.
Try this:
[{"id":"ef2fbb7f7e31c46b","type":"ui_template","z":"869ea53544be83e0","group":"dce9e7a2.d20c78","name":"User Input dialog","order":5,"width":0,"height":0,"format":"<div ng-init=\"init()\" id=\"popup_dialog\" class=\"dialog\">\n \n <div class=\"dialog_content\">\n \n <div class=\"dialog_header\">\n <span ng-click=\"closeDialog()\" class=\"close\">×</span>\n <h2 class=\"title\">{{title}}</h2>\n </div>\n \n <div class=\"dialog_body\">\n\n <div layout=\"column\" layout-align=\"center\" style=\"margin-top: 10px\">\n \n <div layout=\"row\" layout-align=\"center\">\n <div class=\"btn_box\">\n <md-button data-number=\"1\" class=\"btn\" ng-click=\"confirm(1)\" ng-show=\"button1text\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> {{button1text}}\n </md-button>\n </div>\n <div class=\"btn_box\">\n <md-button data-number=\"2\" class=\"btn\" ng-click=\"confirm(2)\" ng-show=\"button2text\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> {{button2text}}\n </md-button>\n </div>\n \n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"closeDialog()\">\n <ng-md-icon icon=\"close\" style=\"color:#fff;\"></ng-md-icon> Cancel\n </md-button>\n </div>\n </div>\n </div> \n \n </div> <!--dialog_body-->\n </div> <!--dialog_content-->\n</div> <!--dialog-->\n\n\n<style>\n\n/* The Dialog (background) */\n.dialog {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 9999; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n -webkit-transform: translateZ(0px);\n -webkit-transform: translate3d(0,0,0);\n -webkit-perspective: 1000;\n}\n\n.dialog_content {\n position: absolute;\n background-color: #fff;\n left: calc(50% - 300px);\n top: 30px;\n border-radius: 10px;\n padding: 0;\n width: 600px;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n -webkit-animation-name: animatetop;\n animation-name: animatetop;\n animation-duration: 0.4s;\n}\nh2.title {\n margin:10px;\n font-size: 20px;\n}\n/* Media query for smartphones (to Fix?) */\n@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { \n .dialog_content {\n margin-top: 5%;\n margin-left: 5%;\n}\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n from {top: -300px; opacity: 0} \n to {top: 0; opacity: 1}\n}\n\n@keyframes animatetop {\n from {top: -300px; opacity: 0}\n to {top: 0; opacity: 1}\n}\n\n/* Dialog Header */\n.dialog_header {\n padding: 2px 16px;\n background-color: #03A9F4;\n border-radius: 10px 10px 0 0;\n color: white;\n}\n\n/* Dialog Body */\n.dialog_body {padding: 5px;}\n\n/* The Close Button */\n.close {\n color: #fff;\n float: right;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n}\n\n.close:hover,\n.close:focus {\n color: #1565C0;\n text-decoration: none;\n cursor: pointer;\n}\n\n/* Number container */\n.btn_box{\n margin: 5px;\n}\n\n/* Buttons style */\n.btn {\n min-height: 40px;\n min-width: 80px;\n font-weight: bold;\n margin: 0px 10px 10px 0px;\n box-shadow: 4px 4px 6px 0 #dadada;\n background-color: #29B6F6;\n color: #fff;\n}\n\n.btn:not([disabled]):hover {\n background-color: #03A9F4;\n}\n\n\n</style>\n\n<script>\n\n/**\n * Steve-Mcl 2022-02-27\n * Adapated from https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/2?u=steve-mcl\n */\n\nvar dialog;\n\n/* ==== */\n(function(scope) {\n scope.payload = \"\";\n scope.topic = \"\";\n scope.inited = false;\n \n scope.init = function() {\n //Hide the md-panel\n console.log(\"scope.init\")\n $('#popup_dialog').css(\"display\", \"none\");\n dialog = $('#popup_dialog').detach();\n }\n \n scope.showDialog = function() {\n console.log(\"scope.showDialog\")\n dialog.appendTo(document.body); // better to add the body only when the numpad is displayed (seams to be removed automatically)\n dialog.css(\"display\", \"block\");\n }\n \n scope.closeDialog = function(){\n scope.payload = \"\";\n scope.topic = \"\";\n scope.title = \"\";\n scope.button1text = \"\";\n scope.button2text = \"\";\n dialog.css(\"display\", \"none\");\n }\n \n scope.confirm = function(buttonNo) {\n console.log(\"scope.confirm\")\n\n //get payload for this button\n const payload = scope.payload[\"button\" + buttonNo + \"payload\"];\n const butText = scope[\"button\" + buttonNo + \"text\"];\n\n //send to node-red\n scope.send({\n topic: scope.payload.topic || \"button/\" + buttonNo, \n payload: payload || butText || true\n });\n scope.closeDialog();\n }\n\n scope.$watch('msg', function(msg) {\n console.log(\"scope.$watch\", msg)\n if(!scope.inited){\n scope.inited = true;\n return;\n }\n if(msg && msg.topic){\n switch(msg.topic){\n case \"show\":\n scope.topic = msg.topic;\n scope.payload = msg.payload || {};\n scope.title = scope.payload.title || \"Make your choice\";\n scope.button1text = scope.payload.button1text;\n scope.button2text = scope.payload.button2text;\n scope.showDialog();\n break;\n case \"close\": \n scope.closeDialog(); \n break;\n }\n }\n });\n})(scope);\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":390,"y":1920,"wires":[["c76e63191461baeb"]]},{"id":"c76e63191461baeb","type":"debug","z":"869ea53544be83e0","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":590,"y":1920,"wires":[]},{"id":"fb1e27b44f5a63b4","type":"comment","z":"869ea53544be83e0","name":"Setup the JSON payload for each button","info":"","x":240,"y":1860,"wires":[]},{"id":"7a1af8437fec45f7","type":"ui_button","z":"869ea53544be83e0","name":"","group":"dce9e7a2.d20c78","order":3,"width":9,"height":2,"passthru":true,"label":"Want to Quit?","tooltip":"","color":"{{msg.textcolor}}","bgcolor":"{{msg.bgcolor}}","className":"","icon":"","payload":"{\"button1text\":\"Yes\",\"button2text\":\"No\",\"title\":\"Do you want to quit?\"}","payloadType":"json","topic":"show","topicType":"str","x":160,"y":1940,"wires":[["ef2fbb7f7e31c46b"]]},{"id":"72b57fa0fe707efc","type":"ui_button","z":"869ea53544be83e0","name":"","group":"dce9e7a2.d20c78","order":2,"width":9,"height":2,"passthru":true,"label":"chose a direction","tooltip":"","color":"{{msg.textcolor}}","bgcolor":"{{msg.bgcolor}}","className":"","icon":"","payload":"{\"button1text\":\"go left\", \"button2text\":\"go right\", \"title\": \"Choose a direction\", \"button1payload\": \"left\", \"button2payload\": \"right\" } ","payloadType":"json","topic":"show","topicType":"str","x":170,"y":1900,"wires":[["ef2fbb7f7e31c46b"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Default","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false,"className":""},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
@Giamma Thank you! This is very close to what I need, I unfortunately know very little about CSS. What do I need to change to make the "Choose a direction" box bigger and the 3 buttons inside bigger as well?
It's not my project, I found it in this forum, anyway in the template node you find the dimension (px) of single objects.
You have to do some test ....
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
