Sorry, but....... I have yet again found a hitch which has me stumped. I have a template built which works, but I can't see to get the button working for this case. I want the button to accept {{msg.text}} and {{msg.colour}} This is what I have so far: {{msg.text}} background-color:{{msg.colour}} Ack Event (function($scope) { $('#GButtonM_AckEv').on('click', function(e) { e.preventDefault(); //prevent default behavior $scope.send({"topic":"momentary_regular","payload": true}); }); })(scope); But it doesn't work. I've tried with and stuff. But am getting no where fast. I know I need to study more. But I can't find connections between examples and that which I want to do. So I ask here. Anyone - please.

It seems to have resolved itself

[image] Trying_to_learn: But it doesn't work. What about it doesn't work?

Sorry. My bad. (A lot of work has since happened.) This is the code as of now: Template as defined: :root { --dashboard-unit-width: 48px; --dashboard-unit-height: 48px; /* --program-names-background: black; --program-names-foreground: #cccccc; */ } .nr-dashboard-template { padding: 0px; } .program-names.disabled{ cursor: not-allowed; pointer-events: none; color: #aaaaaa !important; } .program-names:not([disabled]):hover{ background-color: #232323 !important; } /* This is the normal button definition */ .program-names{ background-color: var(--program-names-background) !important; color: var(--program-names-foreground) height: var(--dashboard-unit-height); width: 100%; border-radius: 10px; font-size:1.0em; font-weight:normal; margin: 0; min-height: 36px; min-width: unset; line-height: unset; } /* This is a sub-set which is invoked by */ /* */ /* note the (space) "bigger" at the end. */ .program-names.bigger{ font-weight:bold; font-size:1.5em; } /* This is for buttons with a lot of text. `font-size:0.7em` */ /* makes the font 70% normal size */ /* .program-names.small{ font-size:0.7em; } */ .small{ font-size:0.7em; } /* This is for buttons with just icons, to upsize the size */ /* of the icon with the line: */ /* in the other node */ .remote-icon{ font-size:2.0em; } /* This is the same as the other one, but it makes the icon smaller */ .remote-iconS{ font-size:0.5em; } .program-names.black{ background-color: var(--program-names-background) !important; color: var(--program-names-foreground) !important; } .program-names.red{ background-color: red !important; color: var(--program-names-foreground) !important; } .program-names.red:not([disabled]):hover{ background-color: orange !important; } .program-names.darkred{ background-color: darkred !important; color: black !important; } .program-names.multicolour{ /*background-color: darkgreen !important;*/ border-radius: 10px; color: white; } .program-names.blinking{ animation:blinkingAnim1 0.8s infinite; } @keyframes blinkingAnim1{ 0%{ background-color: var(--program-names-background); color:var(--program-names-foreground);} 50%{ background-color: var(--program-names-foreground); color:var(--program-names-background);} 100%{ background-color: var(--program-names-background); color:var(--program-names-foreground);} } .program-names.red.blinking{ animation:blinkingAnim2 0.8s infinite; } @keyframes blinkingAnim2{ 0%{ background-color: red; color:#cccccc;} 50%{ background-color: #cccccc; color:red;} 100%{ background-color: red; color:#cccccc;} } Yes, a lot of comments. It is work in progress. This is the button node: {{msg.text}} Ack Event (function($scope) { $('#GButtonM_AckEv').on('click', function(e) { e.preventDefault(); //prevent default behavior $scope.send({"topic":"momentary_regular","payload": true}); }); })(scope); This is what I see: [Screenshot from 2020-06-08 15-42-14] I don't understand where/how the size is being corrupted. This is a convoluted trip. I am trying to work out the best way to build buttons. This is how I am doing for now to see how good it is compared to the other way (yet untested). I'm getting tripped up with the class names and their interaction. Though hotnipi is helping me with some parts of it.

(Phew, No) When I start to dig holes, I dig a lot of them. Got stuck on that and so moved on while I feel motivated to get things done. Working on what I have been told, and am being told, it is slow going just now. Things (buttons) work ok. Then when I try to move them and use them else where they stop working. Now I have a problem with the graphics hight. The button is shorter than what it was at some time in the past before I started messing with things. :frowning:

[image] Trying_to_learn: Now I have a problem with the graphics hight. The button is shorter than what it was at some time in the past before I started messing with things. :frowning: I would suggest to do only a single change at a time so you can pinpoint when something like this happens. Also try to keep track of the changes you do. For example keep a separate text editor open where you copy paste the previous version, ideally with a comment of what was and what wasn't working with it.

I made a mess of the previous post, so I redacted it. This is the problem as it is now that I am facing: I can control a template's button text and background colour on a machine. I move it to another machine and all I can do is control the text. Why? Working machine template node (configuration for CSS): :root { --dashboard-unit-width: 48px; --dashboard-unit-height: 48px; } /* Best so far to fit 1x1 area */ .baseline { background-color: var(--program-names-background); color: var(--program-names-foreground); height: var(--dashboard-unit-height); width: 100%; border-radius: 10px; font-size:1.0em; font-weight:normal; margin: 0; min-height: 36px; min-width: unset; line-height: unset; } .starthere{ width: 100%; border-radius: 10px; font-size:1.0em; font-weight:normal; margin: 0; border: none; border-radius: 8px; text-align: center; padding: 0px 0px; text-decoration: none; display: inline-block; font-size: 14px; margin: 0px 0px; cursor: pointer; } .baseline.small{ font-size:0.8em; } .tiny{ font-size: 0.5em; } Button (other template) node: {{msg.payload}} Ack Event (function($scope) { $('#GButtonM_AckEv').on('click', function(e) { e.preventDefault(); //prevent default behavior $scope.send({"topic":"momentary_regular","payload": true}); }); })(scope); New machine's configuration code: I am going through trying to find out if anything else is causing the problems by commenting out bits of the code. To now I haven't found anything that does. :root { --dashboard-unit-width: 48px; --dashboard-unit-height: 48px; } .nr-dashboard-template { padding: 0px; } /* .program-names.disabled{ cursor: not-allowed; pointer-events: none; color: #aaaaaa !important; } .program-names:not([disabled]):hover{ background-color: #232323 !important; } */ /* This is the normal button definition */ .program-names{ background-color: var(--program-names-background); color: var(--program-names-foreground); height: var(--dashboard-unit-height); width: 100%; border-radius: 10px; font-size:1.0em; font-weight:normal; margin: 0; min-height: 36px; min-width: unset; line-height: unset; } /* This is a sub-set which is invoked by */ /* */ /* note the (space) "bigger" at the end. */ .program-names.bigger{ font-weight:bold; font-size:1.5em; } /* This is for buttons with a lot of text. `font-size:0.7em` */ /* makes the font 70% normal size */ .program-names.small{ font-size:0.7em; } /* This is for buttons with just icons, to upsize the size */ /* of the icon with the line: */ /* in the other node */ .remote-icon{ font-size:2.0em; } /* This is the same as the other one, but it makes the icon smaller */ .remote-iconS{ font-size:0.5em; } .program-names.black{ background-color: var(--program-names-background) !important; color: var(--program-names-foreground) !important; } .program-names.red{ background-color: red !important; color: var(--program-names-foreground) !important; } .program-names.red:not([disabled]):hover{ background-color: orange !important; } .program-names.darkred{ background-color: darkred !important; color: black !important; } Other machine's button node: {{msg.text}} Ack Event (function($scope) { $('#GButtonM_AckEv').on('click', function(e) { e.preventDefault(); //prevent default behavior $scope.send({"topic":"momentary_regular","payload": true}); }); })(scope); Given they use different parts of the msg to display the text (either payload or text) on the new machine I can't get the background colour to change. Please. Someone? Another update After getting fed up with it, shutting down and coming back to it later, it works. Go figure!

Node-RED

Node-RED Forum

Going in circles with `CSS` buttons

Dashboard

knolleary 8 June 2020 06:29 4

Is this the same button you are asking about here? CSS button not working

Topic		Replies	Views
CSS School, buttons and things not making sense Dashboard	43	4242	19 April 2020
Ui_template - widget styling Dashboard	1	1149	10 October 2020
Help with (yet another) button Dashboard	8	612	14 April 2020
CSS - ui_template new ck-button widget text is not centered vertically Dashboard	4	1188	12 October 2020
CSS Square & Round On/Off Buttons (Revisited) Share Your Projects dashboard-2	4	296	2 November 2025

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Going in circles with `CSS` buttons

Related topics