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 ....
