# Going in circles with \`CSS\` buttons

**URL:** <https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970>\
**Category:** Dashboard\
**Created:** [8 June 2020 03:56 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970 "2020-06-08T03:56:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [8 June 2020 03:56 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/1 "2020-06-08T03:56:41Z")

</div>

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:

```auto
<div id="GButtonM_AckEv">
    <md-button class="md-button program-names multicolour small">{{msg.text}}
        background-color:{{msg.colour}}   
    <md-tooltip>Ack Event</md-tooltip>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_AckEv').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": true});
});
    
})(scope);
</script>

```

But it doesn't work.

I've tried with `<style>` and `<class>` 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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 June 2020 06:07 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/2 "2020-06-08T06:07:22Z")

</div>

> [@Trying\_to\_learn](#):
>
> But it doesn't work.

What about it doesn't work?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [8 June 2020 06:12 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/3 "2020-06-08T06:12:49Z")

</div>

Sorry. My bad.

(A lot of work has since happened.)

This is the code as of now:

Template as defined:

```auto
<style id="program-names">
    :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 */
    /* <md-button class="md-button program-names bigger"> */
    /* 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: */
    /* <i class="fa fa-fw fa-plus remote-icon"> 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;}
    }     
</style>

```

Yes, a lot of comments. It is _work in progress_.

This is the _button_ node:

```auto
<div id="GButtonM_AckEv">
    <md-button style="background-color:{{msg.colour}}" class="md-button .program-names.multicolour small">{{msg.text}}
    <md-tooltip>Ack Event</md-tooltip>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_AckEv').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": true});
});
    
})(scope);
</script>

```

This is what I see:

![Screenshot from 2020-06-08 15-42-14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbe8d04c3252cf81ac32f34d374af1f1034eb3bf.png)

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 June 2020 06:29 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/4 "2020-06-08T06:29:38Z")

</div>

Is this the same button you are asking about here? [CSS button not working](https://discourse.nodered.org/t/css-button-not-working/27962/9)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [8 June 2020 06:34 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/5 "2020-06-08T06:34:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [8 June 2020 11:18 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/6 "2020-06-08T11:18:35Z")

</div>

> [@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. ☹

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [8 June 2020 22:37 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/8 "2020-06-08T22:37:30Z")

</div>

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):

```auto
<style id="baseline">

: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;
}
</style>

```

_Button_ (other `template`) node:

```auto
<div id="GButtonM_AckEv">
    <md-button style="background-color:{{msg.colour}}" class="md-button baseline">{{msg.payload}}
    <md-tooltip>Ack Event</md-tooltip>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_AckEv').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": true});
});
    
})(scope);
</script>

```

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.

```auto
<style id="program-names">
    :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 */
    /* <md-button class="md-button program-names bigger"> */
    /* 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: */
    /* <i class="fa fa-fw fa-plus remote-icon"> 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;
    }
</style>

```

Other machine's _button_ node:

```auto
<div id="GButtonM_AckEv">
    <md-button style="background-color:{{msg.colour}}" class="md-button program-names">{{msg.text}}
    <md-tooltip>Ack Event</md-tooltip>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_AckEv').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": true});
});
    
})(scope);
</script>

```

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!

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 June 2020 01:23 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/9 "2020-06-09T01:23:09Z")

</div>

It seems to have resolved itself

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 June 2020 01:23 UTC](https://discourse.nodered.org/t/going-in-circles-with-css-buttons/27970/10 "2020-06-23T01:23:21Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.