# Button size using template node

**URL:** https://discourse.nodered.org/t/button-size-using-template-node/4008
**Category:** Dashboard
**Created:** [15 October 2018 21:02 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008 "2018-10-15T21:02:31Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [15 October 2018 21:02 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/1 "2018-10-15T21:02:31Z")

</div>

Hi all!  
I've create a button using the template node. The code to do this is the following:

```auto
<md-button class="vibrate filled touched bigfont rounded" style="background-color:black" ng-click="send({payload: msg.payload })"> 

<svg width="260px" height="90px" version="1.1" viewBox="0 0 800 200">
 <g id="Button_Long">
  
  <rect fill="blue" width="800" height="200"/>
  <g ng-style="{fill: (msg.payload || 0) ? 'lime' : 'red'}">
    <rect width="800" height="200" rx="80" ry="80"/>
  </g>
  
  <rect fill="grey" x="11" y="10" width="778" height="180" rx="90" ry="90"/>
  <g ng-style="{fill: (msg.payload || 0) ? 'lime' : 'red'}">
      
    <text x="400" y="125" style="text-anchor:middle" font-weight="bold" font-size="80" font-family="Arial">{{(msg.payload||0)? " OPEN " : "CLOSED"}} </text>
    </g>
  </g>
</svg>

</md-button>

```

In certain condition, I have the need to make invisible the entire button. How can I do? Which parameter have I to add? In which raw of the code? Sorry but I'm not a expert of this type of language.  
Thanks in advance  
Paolo

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [17 October 2018 16:41 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/2 "2018-10-17T16:41:13Z")

</div>

You can add an angular directive on any element (like your button), using syntax like this:  
`<md-button class="vibrate filled touched bigfont rounded" style="background-color:black" ng-if="msg.payload!=0" ng-click="send({payload: msg.payload })">`

Check out the ["ng-if" and other directives](https://docs.angularjs.org/api/ng/directive/ngIf) for more information

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [20 October 2018 21:22 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/3 "2018-10-20T21:22:39Z")

</div>

wonderful!  
it is great!it works!  
is there a way to hide a entire group in a dashboard?  
thanks a lot shrickus!

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [21 October 2018 22:36 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/4 "2018-10-21T22:36:13Z")

</div>

hi shrickus,  
trying your solution i'm noting that I have to refresh the browser page to make effective the changes in the button (due to different value associated to ng-if expression).  
how can I update the page automatically as the other objects of the dashboard?  
thanks

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [22 October 2018 16:37 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/5 "2018-10-22T16:37:46Z")

</div>

In the dashboard, any `ui_group` can be collapsed/expanded in-place by passing the right "control" msg -- such as those defined in [this sample flow](https://flows.nodered.org/flow/f1b077d49f52866e74e9b983690b470f).

As for updating the page "automatically", I'm guessing you mean when new data arrives, you want to see it in some existing widget on the dashboard? If so, then it's just as simple as sending a new payload to whatever widget needs new content to be displayed. In your example, I guess clicking of the button sends the payload correctly, but does not update the display of the button to match? If so, you will need to route the output of the button back to it's own input port -- just be careful to not create an "infinite loop", which causes the cpu to spike and the machine to slow to a crawl...

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [3 November 2018 15:24 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/6 "2018-11-03T15:24:07Z")

</div>

I'm trying to apply the ng-if to an image (a traffic light) using the following code

```
<md-button class="vibrate filled touched bigfont rounded" style="background-color:white" ng-if="msg.payload == '1'" ng-click="send({payload:'hide_done'})"> 
<svg .... here the image code
></svg>

</md-button>

```

The problem is the ng-if condition: it doesn't work when the msg.payload=1.  
Do you have any idea to fix the problem?

Thanks a lot  
Paolo

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [3 November 2018 18:29 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/7 "2018-11-03T18:29:59Z")

</div>

> [@cpaolojo](#):
>
> ng-if="msg.payload == '1'"

The javascript `==` operator _should_ return true when comparing the number 1 to the string '1' -- but perhaps the `ng-if` **expression** evaluator does something slightly different... did you try removing the single quotes from the `ng-if` test? If so, did that make a difference? The other thing to try is to wrap the expression in curly braces (sorry, but i can't remember the syntax.. i always have to look it up).

For more information about what makes a valid angular "expression" and where you can use them, check out the [Angular v1 docs](https://docs.angularjs.org/guide/expression) site.

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [4 November 2018 00:32 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/8 "2018-11-04T00:32:13Z")

</div>

yes, I've tried removing the single quote, but unfortunately it doesn't change.  
I can't understand where is the problem

---

<div class="post-metadata">

### Author: ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)
#### Post date: [4 November 2018 02:57 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/9 "2018-11-04T02:57:49Z")

</div>

Try to set size for `template` node to some fixed value. Unfortunately, `auto` size is failing in many cases. Looks like Dashboard is checking size of the content on first render and then don't change it later so if you have `ng-if` that initially renders your HTML invisible, then the whole `md-card` will have `height: 0` and `opacity: 0` no matter if your condition for `ng-if` will change later.

I've just tested that on my local NR instance to confirm that buggy behavior.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [4 November 2018 08:58 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/10 "2018-11-04T08:58:51Z")

</div>

That is intentional and not buggy behaviour. Changing the size may cause the whole screen to rearrange its layout which would look horrible.

---

<div class="post-metadata">

### Author: ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)
#### Post date: [4 November 2018 18:49 UTC](https://discourse.nodered.org/t/button-size-using-template-node/4008/11 "2018-11-04T18:49:54Z")

</div>

it looks like the problem is the expression.  
with the following expression:  
ng-if="msg.payload!=0"  
it works!