# Help with UI\_button and the size

**URL:** <https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610>\
**Category:** Dashboard\
**Created:** [25 March 2020 11:02 UTC](https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610 "2020-03-25T11:02:48Z")\
**Posts on this page:** 4\
**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:** [25 March 2020 11:02 UTC](https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610/1 "2020-03-25T11:02:48Z")

</div>

Recently I was shown a _trick_ to make a button which sends two signals.  
One when pressed and one when released.

I want to put an icon in/on it rather than text.  
Alas unless it is 2x1 size, the icon is corrupted.

```auto
[{"id":"4846c8f.8bc5bb8","type":"ui_template","z":"1d85b106.5dfcd7","group":"753d90f1.02b878","name":"Up","order":13,"width":"1","height":1,"format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> add </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":3570,"y":330,"wires":[["bb7f079f.86f9d8"]]},{"id":"753d90f1.02b878","type":"ui_group","z":"","name":"Full Remote","tab":"39b306a2.96619a","order":1,"disp":true,"width":"3","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

Well, I say _corrupted_ in that it isn't shown and I get _sliders_ around it.

Is there a way to make it 1x1 size and not get the sliders?

Sorry if this is a _page 1_ question. But I am admitting I don't know.

Oh, and while asking:  
How do I change the background and foreground colours?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [25 March 2020 11:19 UTC](https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610/2 "2020-03-25T11:19:02Z")

</div>

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f8eace55f8b0007c05f64892d5c076fb75e0936.png)

Works fine here with Mozilla and Chrome.  
Tested with a widget size of 48x48.

---

<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:** [25 March 2020 11:23 UTC](https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610/3 "2020-03-25T11:23:19Z")

</div>

Ok, so I am now going to put on my second "Stupid hat"......

You have it as 48x48 pixel (widget) size.

I'm guessing that is the size I sent it as?

(I just tried it again and now it works.)

Argh!

Ok.... Third "Stupid hat".... The colours....  
It comes up as black on white. I'd prefer it white on black.

This is the screen as is with the new button active.

Also in the pipeline is to change it to the "Volume up" button (as shown under the _Disable_ button and replace the other one with the "Volume down" button)

 ![Screenshot from 2020-03-25 22-23-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad9cf7909898904556ac801f08be9fbb71294a76.png)

If I make the _button_ this:

```auto
[{"id":"4846c8f.8bc5bb8","type":"ui_template","z":"1d85b106.5dfcd7","group":"753d90f1.02b878","name":"Up","order":13,"width":"1","height":1,"format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\">add</i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":3570,"y":330,"wires":[["bb7f079f.86f9d8"]]},{"id":"753d90f1.02b878","type":"ui_group","z":"","name":"Full Remote","tab":"39b306a2.96619a","order":1,"disp":true,"width":"3","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

```

I see this on the browser:

 ![Screenshot from 2020-03-25 22-29-28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5a40e521171e7f97bbf7056c1f49c443ffe1801.png)

---

<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:** [24 April 2020 11:23 UTC](https://discourse.nodered.org/t/help-with-ui-button-and-the-size/23610/4 "2020-04-24T11:23:22Z")

</div>

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