# Help with (yet another) button

**URL:** <https://discourse.nodered.org/t/help-with-yet-another-button/24799>\
**Category:** Dashboard\
**Created:** [14 April 2020 10:42 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799 "2020-04-14T10:42:02Z")\
**Posts on this page:** 10\
**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:** [14 April 2020 10:42 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/1 "2020-04-14T10:42:02Z")

</div>

Yesterday @bakman2 helped me no end with a button and getting the colours working as I wanted.

New day, new button.

This is what I have in the `template` node:

```auto
<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})"> <i class="material-icons"> <span style="color:{{msg.colour}}"> volume_up </i> </button>

```

Alas this gives me a button with a `white` background.

I would prefer it to be black. (Match the theme I am using.)  
But even via the `{msg}` would be ok. That allows me more options.  
Though I think if you post the code with a fixed colour, I can nut it out.

Just for the fun of it, here is a bit of flow which flashes the button when pressed.

This is the flow.

```auto
[{"id":"bc5aa5c4.52161","type":"ui_template","z":"1781e581.31721a","group":"8418af9a.bbc66","name":"V Up","order":1,"width":2,"height":1,"format":"<button ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\"> <i class=\"material-icons\"> <span style=\"color:{{msg.colour}}\"> volume_up </i> </button>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":3640,"y":680,"wires":[["6b7607e4.7d79c","15a715e3.e0c4fa","b51e2b02.46d418"]]},{"id":"6b7607e4.7d79c","type":"switch","z":"1781e581.31721a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":3860,"y":720,"wires":[[],["36fcedb1.36a5e2"]]},{"id":"b51e2b02.46d418","type":"trigger","z":"1781e581.31721a","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-140","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":3870,"y":680,"wires":[["36fcedb1.36a5e2"]]},{"id":"36fcedb1.36a5e2","type":"function","z":"1781e581.31721a","name":"toggle","func":"var x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg.colour = \"black\";\n msg.payload = \"black\";\n return msg;\n}\n\nif (x === 0)\n{\n msg.colour = \"lime\";\n msg.payload = \"lime\";\n} else\nif (x === 1)\n{\n msg.colour = \"black\";\n msg.payload = \"black\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn msg;","outputs":1,"noerr":0,"x":4020,"y":720,"wires":[["4732f533.e29164","bc5aa5c4.52161"]]},{"id":"4732f533.e29164","type":"debug","z":"1781e581.31721a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":4160,"y":720,"wires":[]},{"id":"8418af9a.bbc66","type":"ui_group","z":"","name":"Group 4","tab":"b128eb09.9f681","order":5,"disp":true,"width":"4","collapse":false},{"id":"b128eb09.9f681","type":"ui_tab","z":"","name":"TV_Remote_control","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [14 April 2020 11:01 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/2 "2020-04-14T11:01:47Z")

</div>

Looking at the code for the button, I’m reminded of an older topic where we discussed this. I think I compared HTML syntax to those Russian nesting dolls in it. That is exactly what is going on here too. Each opening tag has to be closed again too. This is part of what is known as the box model. Visualising it below, your button should look like this:

```auto
button
    i
        span
             Text
        /span
    /i
/button

```

Looking at your snippet above, the closing span is missing, and as described last year, the order is important too. Try inserting the `</span>` at the right place and see if that solves 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:** [14 April 2020 11:10 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/3 "2020-04-14T11:10:01Z")

</div>

I am not smart enough to know how to do that in the `template` node on one line.

I get how to do that with another type of button, but that type of button doesn't allow a `button down` and `button up` message.

I try to split the code to multiple lines and I seem to be unable to find the right place to split it.

I'll look at what you said but won't promise anything.  
Ok, I think I got that `</span>` bit working.  
(and actually got it split to multiple lines.)

But I still don't get/see where to put the `background-color` part.

In other buttons it is like this:

```auto
<md-button class="vibrate filled touched bigfont rounded" style="background-color:#000000" ng-click="send({payload: 'dummy_payload'})">
       <i class="material-icons">
           <span style="color:{{msg.payload.pause}}">pause</span> / <span style="color:{{msg.payload.play}}">play_arrow</span>
           </i>
</md-button>

```

But that is (to me) a whole different horse.

---

<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:** [14 April 2020 11:27 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/4 "2020-04-14T11:27:46Z")

</div>

(either through sheer stupidity or stuborness - you pick.)

Progress has been made.

But let's not get too far ahead of ourselves.

This is what I have now:

![Screenshot from 2020-04-14 21-21-24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f2102398847d570e75c4373364888bf0b38676e.png)

That is the `GUI`side of things.

This is the code:

```auto
<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})">
    <i class="material-icons"> 
        <span style="color:{{msg.colour}}"> volume_up 
        </span>
    </i> 
</button>

```

Ok.

The _structure_ is getting there.

I then change the code in the node to this:

```auto
<button ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})" style="background-color:black">
    <i class="material-icons"> 
        <span style="color:{{msg.colour}}"> volume_up 
        </span>
    </i> 
</button>

```

And this is what I get `GUI` wise:

![Screenshot from 2020-04-14 21-24-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b6b55c813ce31b1377caa45065efbf13c5955fe1.png)

A **smaller** button.

I really am not seeing how adding that bit of text changes the size of the button.  
I would accept if I put in something like `scale` or `button_size` (or what ever).

But I merely put in the colour of the background.

Nah, I am really not getting this.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 April 2020 11:35 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/5 "2020-04-14T11:35:51Z")

</div>

[md-button](https://material.angularjs.org/latest/CSS/button) and [button](https://www.w3schools.com/tags/tag_button.asp) are very different things.  
You should use one of them to be consistent over your dashboard. Otherwise the mess is too much to handle.

---

<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:** [14 April 2020 11:46 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/6 "2020-04-14T11:46:46Z")

</div>

How I would love to @hotNipi.

How I would love to.

I just scratch through using what meets the needs at the time.

_Alas_ I have used both.

Why?

Dunno.

I think it started with basic needs.  
The `button` node wasn't cutting the mustard much any more and I needed one which sends a message when pressed and released.

So though that is only one, the other will have snuck (sneeked) in there some how.

So, I am re-constructing a lot of flows, I am trying to use only one kind, but again: the gremlins get in and all bets are off.

Also the buttons resizing themselves makes it fun too.  
I am not getting where that is happening, or how.

I am making a display with a lot of buttons and I would like/prefer them all to be _on the same team_ - as it were.

So I am crawling through the ones I have and (partly) know how to use trying to get things to work.

This may not be a good way, or best way to do it. Alas it is the only way I know.

I am trying. But it is just so confusing. Studying all the stuff I need to know would take months (years?) to learn.

Though I get that, I am wanting to keep myself interested and doing something of some enjoyment.

I never (ever ever) thought I would be able to do what I am doing today/now. Even if it is not good.

I'm not trying to make excuses, I'm just saying how it is.

(Thanks though)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [14 April 2020 12:04 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/7 "2020-04-14T12:04:16Z")

</div>

“md” in md-button stands for Material Design. It’s a style designed and implemented throughout most of the dashboard by default. In practice, it’s a fully styled button, where `<button>` is just a plain html button without any styling unless you add to it. The css class “material-icons” too is a set of icons within the Material Design look and feel. By changing the background colour through the style attribute, you’re overriding parts of other set styles. This occasionally works good when the rest of the button matches the full styling (md) but with a regular button most of that material design preset styling is missing hence the difference in look. As Nipi says, pick one and stick with it everywhere. If you don’t, issues like these will start and they’re a mess to get rid off in styling. By far the easiest way to fix is by using one button/style type everywhere.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 April 2020 12:04 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/8 "2020-04-14T12:04:25Z")

</div>

> [@Trying\_to\_learn](#):
>
> I am making a display with a lot of buttons and I would like/prefer them all to be _on the same team_ - as it were.

That is the route you should follow. For me this is the rule with no compromises.

Where I can make compromises is if chosen component does not allow certain customizing. And there is another rule then. "Keep it simple". The more you try to go away from standards, the more you'll lose from some other areas. (readability, usability, beauty, whatever)

Overall, the thing you are dealing with is art. (mixed with programming). CSS is art and to get good result in art, it takes time. Usually a lot of time.

---

<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:** [14 April 2020 12:19 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/9 "2020-04-14T12:19:07Z")

</div>

Thanks both.

The _problem_ is that I am not yet confident enough to know which of the buttons I want.

Granted the _default_ `button` is a no-go. It doesn't have enough flexibility for me to use it in all cases.

The thing is way back when I started, a button was a button. I pressed it and all was good in the world.

It does have a nice feature when you `enable` it or not. That was a great discovery late in the game.

Then came another one with the `template` node.  
I'm not sure which was used first; but probably just the simple one, but allowed a bit more _customisation_.  
Then (maybe) came the `message on press` and `message on release` came.  
Those last two are different.  
And each has its own set of things it offers.  
I don't know if there is a good comparison between the two types, so I can sit and compare them.

Until then, I am not sure which will be a longer term better button for me.  
I don't know if the latter two offer the `enable` feature which the default `button` does offer.  
So, really it is (maybe) still in the game.

Doing a retrospective conversion of old files with _button x_ to _button y_ is a lot of work, and I am not sure I am confident enough to do it successfully.

What _could_ be good is having a bigger list of what all three offer and how to use them.  
`CSS` is still foreign to me. `HTML` is just as foreign.  
I know it is a cop out, but I think if I had a structure table, I could make good with that and get the best use of the button I need and use.

---

<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:** [14 May 2020 12:19 UTC](https://discourse.nodered.org/t/help-with-yet-another-button/24799/10 "2020-05-14T12:19:09Z")

</div>

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