# CSS School, buttons and things not making sense **URL:** \ **Category:** Dashboard\ **Created:** [17 April 2020 00:12 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986 "2020-04-17T00:12:32Z")\ **Posts on this page:** 20\ **Page:** 1

**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:** [17 April 2020 00:12 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/1 "2020-04-17T00:12:32Z")

I am not wanting to post multiple topics on the same problem. But where I am: I am confused with the stuff at [Buttons.](https://www.w3schools.com/Css/tryit.asp?filename=trycss_buttons_basic) Yeah, it isn't this forum's concern. I'm asking because rather than join their forum and have to introduce myself, and the people get to know me, etc etc. I'm guessing a lot of people here who are good at CSS kind of know my skill set, and it would help saving time them getting to know me. I'm looking at that link and am wanting to apply that to NR via a `template` node. Thing is, NR doesn't like it. This is their screen shot. ![Screenshot from 2020-04-17 10-08-39](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a13b541cdcbdb55d752e3ab6cbd1a2afc35a7b9.png) I'm taking this as `inline CSS`. So I open the `template` node and paste it in: ![Screenshot from 2020-04-17 10-08-23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1ca631f4b595fcd884e6e495e06e83f5a94f28c0.png) I can't understand why it is complaining. I can maybe accept the first one about the HTML part. But the `` is opened and closed. ---

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [17 April 2020 00:21 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/2 "2020-04-17T00:21:40Z")

just leave out the html, head etc - the dashboard already adds those. only add the `` stuff ---

**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:** [17 April 2020 00:35 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/3 "2020-04-17T00:35:06Z")

Thanks. So now I have gone through and added all the other lines to make it: ```auto Link Button ``` I'm not getting how there are 4 buttons. I get that the ` ``` I get a button. Nice. In the same "group" I put a button. The button is to the left. The `template` is to the right. ![Screenshot from 2020-04-17 12-47-18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c293f153c404c174e71deebae71bcdbb41f06d6b.png) Ok, that looks nice. Same _height_. Let's look at what `dev tools` tells me from the browser. Now at this point: The settings in the `dashboard` are the _default_ and the code for the button you can see. Alas I can't copy from there to paste here, but look at the screen grab: ![Screenshot from 2020-04-17 12-50-23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d66f98dc5280c6c2de239294f85675f1054ed085.png) 24 x 24 is what I am seeing. So the Dashboard is 48 x 48 (yeah, ok. 48/2 = ) The code in the `template` node..... Beats me. Though the line: `padding: 15px 32px;` I'm guessing 15 is height? Because 32 \> 24. I'll try making it a 1x1 button and see what I get. But these numbers seem to be pulled from no where. Ok, some progress... Making it 1x1 I see this: ![Screenshot from 2020-04-17 12-57-14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/744a041d6d43c8112a830859ae9c42435926c158.png) So ok... It is 48 x 48. But where is that specified in the code? It isn't consistent (well, what else can I call it?) with what the system is telling me. ---

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\ **Post date:** [17 April 2020 07:02 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/14 "2020-04-17T07:02:16Z")

> padding: 15px 32px; The notation is top, right, bottom, left. (clockwise) If you see 2 values it is top+bottom, right+left, ie symmetry, If you see 1 value it applies to all sides. And this is padding, not height, ie: around the element. Margin is outside the element (works only if it is a block element). ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b74ee038896931dcdb27422bbd473cf91fbe622c.png) In your browser you need to look at the styles panel, not the html code as that can be overwritten by style definitions. ![Screenshot 2020-04-17 at 09.01.16](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d30a649a744dd6cd239ebf5de5b69935ea467643.jpeg) In case of your button, you can set it to 100% as that will be the width of the "container" it lives in, with margin:0. ---

**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:** [17 April 2020 23:14 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/15 "2020-04-17T23:14:51Z")

(Yeah, not this place's problem, but for now I have messed up my w4school's log in) I am getting these buttons more now. This is the code which I am using as a starting point. ```auto ``` But (I know I have had replies to say how, but I am not getting them) how do I get the part that sends the payload when pressed? (and/or released) I've got this working: ```auto SAVE ``` But the text in the button is at the bottom of the button. So progress is happening. Now I just need to work out that part. ---

**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:** [18 April 2020 08:51 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/16 "2020-04-18T08:51:41Z")

Ok, update to things done. I've sort of got some buttons the size I want, and the look I want. But then when I try to add them sending a payload when pressed, it all goes _pear shaped_. ![Screenshot from 2020-04-18 18-44-09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/110822384153826325b122b05e016d4e7fa67e21.png) The red _volume_ button is great. But despite my efforts, I can't get an output. `xOx` (group2) is great. It is more probable to supply two messages - (down and up). But again: as soon as I set the payload stuff, it goes to looking like the `xOx` button in group3. Here are the codes: Volume: ```auto [{"id":"38b8cfd4.6bdd18","type":"inject","z":"b25fd092.bcc758","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":590,"y":1230,"wires":[["b7cb74fe.5a31d"]]},{"id":"b7cb74fe.5a31d","type":"change","z":"b25fd092.bcc758","name":"yellow / black","rules":[{"t":"set","p":"colour","pt":"msg","to":"yellow","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1290,"wires":[["e357141b.503fb","bc9f58ce.51ceb8","42c89a7e.830f8c"]]},{"id":"46e6efd0.6c182","type":"change","z":"b25fd092.bcc758","name":"black / green","rules":[{"t":"set","p":"colour","pt":"msg","to":"black","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1330,"wires":[["e357141b.503fb","bc9f58ce.51ceb8","42c89a7e.830f8c"]]},{"id":"3e2e22d5.c855e6","type":"inject","z":"b25fd092.bcc758","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":580,"y":1370,"wires":[["46e6efd0.6c182"]]},{"id":"42c89a7e.830f8c","type":"ui_template","z":"b25fd092.bcc758","group":"28891e50.95dcb2","name":"Button (Volume up)","order":1,"width":"1","height":1,"format":"\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":850,"y":1370,"wires":[["b42faea.561865"]]},{"id":"b42faea.561865","type":"debug","z":"b25fd092.bcc758","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1100,"y":1370,"wires":[]},{"id":"28891e50.95dcb2","type":"ui_group","z":"","name":"Group 2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}] ``` `oXo` (Group 2) ```auto [{"id":"ca93012e.a3437","type":"ui_template","z":"b25fd092.bcc758","group":"28891e50.95dcb2","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":340,"y":1050,"wires":[[]]},{"id":"28891e50.95dcb2","type":"ui_group","z":"","name":"Group 2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}] ``` `oXo` group 3 ```auto [{"id":"de8ba5a8.3231a8","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":1880,"wires":[["48406f5a.e6282"]]},{"id":"48406f5a.e6282","type":"debug","z":"b25fd092.bcc758","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":1880,"wires":[]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}] ``` I am really missing how the button sizes are changing, and not sure the comments I have written are correct or not. But I have to start somewhere, and document what I am seeing. The other _problem_ is that some of the buttons _work_ great at size 2x1.... Oh, they are cropped. Some other time. ---

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\ **Post date:** [18 April 2020 11:03 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/17 "2020-04-18T11:03:17Z")

```auto .buttonX ...