CSS School, buttons and things not making sense

Trying_to_learn · 17 April 2020 00:12

I am not wanting to post multiple topics on the same problem.

But where I am: I am confused with the stuff at Buttons.

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.

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

I can't understand why it is complaining.
I can maybe accept the first one about the HTML part.
But the <head> is opened and closed.

Steve-Mcl · 17 April 2020 00:21

just leave out the html, head etc - the dashboard already adds those.

only add the <style> .... </style> stuff

Trying_to_learn · 17 April 2020 00:35

Thanks.

So now I have gone through and added all the other lines to make it:

<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

I'm not getting how there are 4 buttons.

I get that the <style> defines it as internal - sorry I said inline before. My bad.
So the CSS is internal.

Oh.... Ok.
So the:

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

To me though that is wrong. Because putting a debug node on the node and pressing the buttons, nothing comes out.

Yeah, "You didn't specify what is to come out....".
I'll sort of cop that, but then: They aren't buttons. A button - by my definition - is something you press and a messages is sent out.
If nothing is sent out, it isn't a button. It is just .... decoration.

Ok, that's their problem (the school).
Maybe I do need to join. Or is it just me being petty or pedantic?

It seems silly to give an example of a button such that it doesn't send anything when pressed.

Hey, sorry (@Steve-Mcl) and anyone else reading this.
I'm just saying....

Steve-Mcl · 17 April 2020 00:38

button = button X 2
a class = "button" X 1
input type="button" = button X 1

equals 4 buttons.

Actually, <a class="button"> is a hyperlink (a == anchor) STYLED like a button (from the class="button" part)

You'll get there - its all good stuff your learning.

Trying_to_learn · 17 April 2020 00:48

Yeah, thanks.

But do they have a message that is sent when they are pressed?

I keep stubbing my toes on that point.

Steve-Mcl · 17 April 2020 00:50

No, not unless you"wire them up"

Look at the side bar help info for the ui_template node - I think there is an example. If not, search the forum and flows (seen it many times)

Steve-Mcl · 17 April 2020 00:57

Here's a decent thread...

Trying_to_learn · 17 April 2020 00:58

Thanks.

(I don't know if I am getting ahead of myself, but here goes.....)

I'm wanting to make buttons so they are the same size as the supplied button node/s.

So I make my buttons 48 pixels (up/down) and 48 (left/right).
Then if I put them with the other buttons, they will fit in nicely from a GUI point of view.

Is that the right size - given I haven't changed the settings from the default ones NR has.
(Though that was kind of implied)
Sorry. Just so all the cards are on the table.

Trying_to_learn · 17 April 2020 01:05

Thanks.

But all that kind of falls over because weird things start to happen with the buttons when I do things like that.

As I just mentioned: I want these to be compatible with the supplied button node for size.
These are sorter (top to bottom) in size, and they are white.
The other day I added background-color= and they became even shorter.
I was told that is how they are - and I guess I can't change that.

I am needing to find how to make their sizes all the same as a fairly high priority.

Don't worry. I am working on it, it is just slow going at this stage.

P.S.
Oh, and there is another "kink" in that there are (bad word).... I have been shown two ways of making a button in the template node.
One way has a button down and button up message. The other doesn't.
And I am not sure they are from the same branch of structure so I can't easily interchange them. (Though why would I want to?)
Well, so I have only one button that I (from this time onwards) use.

Steve-Mcl · 17 April 2020 01:06

Look in Dev tools, the exact sizes are visible in there. Use the pointer to select an element then look in the styles.

Trying_to_learn · 17 April 2020 01:08

Alas "dev tools" (from the browser) is a whole other can of worms into which I have only just got into.

I was wanting to get the sizes from NR.

This is what I found/see.

So would it be 48 x 48 or (48 + 6) x (48 +6)?
I'm going more for the former. As the latter INCLUDES the spaces between the widgets. Which is outside my question.

Yes?

Steve-Mcl · 17 April 2020 01:14

The only source of truth is in Dev tools im afraid. You have no idea what dashboard does internally with padding, margins, sizes etc.

If you wanna do it right, you'll have to go in to Dev tools. It is the only way to know for sure.

Use the Devtools pointer to select an item then look at the values in the style window.

Trying_to_learn · 17 April 2020 02:49

Not directly at you, but here's what I have since found:

This is the code from the template node.

<style>
.button {
  background-color: blue; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 20px;
  cursor: pointer;
}
</style>
<button class="button">Button text</button>

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

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:

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:

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.

bakman2 · 17 April 2020 07:02

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

In your browser you need to look at the styles panel, not the html code as that can be overwritten by style definitions.

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.

Trying_to_learn · 17 April 2020 23:14

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

<style>
/*  Best so far to fit 1x1 area  */
.mybutton {
  border: none;
  border-radius: 8px;
  text-align: center;
  background-color: #097479;    /* Green */
  color: black;                 /*  "Font" colour */
/*  padding: 15px 10px;*/           /*  This seems to change the area of blue visible  15 - height 20 - width  */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 0px 0px;   /* Was 0 20 */
  cursor: pointer;
}
</style>
<button class="mybutton">xYx</button>

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:

<style>
/*  Best so far to fit 1x1 area  */
.mybutton {
  border: none;
  border-radius: 8px;
  text-align: center;
  background-color: #097479;    /* Green */
  color: black;                 /*  "Font" colour */
/*  padding: 15px 10px;*/           /*  This seems to change the area of blue visible  15 - height 20 - width  */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 0px 0px;   /* Was 0 20 */
  cursor: pointer;
}
</style>

<md-button class="mybutton" ng-click="send({topic:'clicked', payload:'button was clicked'})">SAVE</md-button>

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.

Trying_to_learn · 18 April 2020 08:51

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.

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:

[{"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":"<style= background:{{msg.background}}>\n<button ng-mousedown=\"send({payload: 'Down'})\"  ng-mouseup=\"send({payload: 'Up'})\"> \n<i class=\"material-icons\"> <span style=\"color:{{msg.colour}}\"> volume_up </i>\n</button>\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)

[{"id":"ca93012e.a3437","type":"ui_template","z":"b25fd092.bcc758","group":"28891e50.95dcb2","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"<style>\n/*  Best so far to fit 1x1 area  */\n.button2 {\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n  background-color: #097479;    /* Green */\n  color: black;                 /*  \"Font\" colour */\n/*  padding: 15px 10px;*/           /*  This seems to change the area of blue visible  15 - height 20 - width  */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 15px;\n  margin: 0px 0px;   /* Was 0 20 */\n  cursor: pointer;\n}\n</style>\n<button class=\"button2\">xOx</button>\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

[{"id":"de8ba5a8.3231a8","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"<style>\n/*  Best so far to fit 1x1 area  */\n.buttonX {\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n  background-color: #097479;    /* Green */\n  color: black;                 /*  \"Font\" colour */\n/*  padding: 15px 10px;*/           /*  This seems to change the area of blue visible  15 - height 20 - width  */\n  padding: 15px 0px;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 15px;\n  margin: 0px 0px;   /* Was 0 20 */\n  cursor: pointer;\n}\n</style>\n<button class=\"mybuttonX\" click=\"send({topic:'clicked', payload:'button was clicked'})\">xOx</button>\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.

bakman2 · 18 April 2020 11:03

.buttonX

...

<button class="mybuttonX">

If you want to style all buttons the same:

button{}

If you want to style buttons with a class='button':

.button{}

Now you are styling .buttonX but you assign a class name class='mybuttonX' which doesnt exist.

Trying_to_learn · 18 April 2020 11:05

(Redacted, but brought back to help explain my thinking)

Yeah, but appendage is me trying different things to see the results and not delete what I have.

(appendage: mybuttonX for example. mybutton works to what I want. the X is me trying different things.)

So if it doesn't work, I can delete that lot and go back to what was working.

So...... I am missing something in how I am doing it.
Sorry, I know this is where the problem is, but I am not seeing the connections.

As I said in the other post I will look at it/into it. But given this is where I am at, I am not confident I am going to see it.

Trying_to_learn · 18 April 2020 11:06

Oh.

That may be part of the problem.

I'll look into it.

Thanks.

I got confused with the names.

bakman2 · 18 April 2020 11:14

As said above: it is cascading, define once and apply where needed. If you need 6 buttons all with the same styling, just use 1 class.

Topic		Replies	Views
Yes, I know, CSS has been beaten to death, but still can't make it work General	2	321	17 June 2020
`CSS` buttons not remembering settings as well as normal buttons Dashboard	5	500	24 June 2020
Style normal buttons to match the multistate-switch Dashboard	9	666	25 November 2021
Button colour (using TEMPLATE node) help - the next stage Dashboard	3	1290	25 April 2020
My dive into CSS: I'm missing something when applying it to Node-Red Dashboard	8	594	16 May 2020

CSS School, buttons and things not making sense

Related topics