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. [Screenshot from 2020-04-17 10-08-39] 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 is opened and closed.

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

Thanks. So now I have gone through and added all the other lines to make it: .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; } Default Button Link Button Button I'm not getting how there are 4 buttons. I get that the defines it as internal - sorry I said inline before. My bad. So the CSS is internal. Oh.... Ok. So the: Default Button Link Button 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....

[image] Trying_to_learn: I'm not getting how there are 4 buttons. button = button X 2 a class = "button" X 1 input type="button" = button X 1 equals 4 buttons. Actually, is a hyperlink (a == anchor) STYLED like a button (from the class="button" part) You'll get there - its all good stuff your learning.

Yeah, thanks. But do they have a message that is sent when they are pressed? I keep stubbing my toes on that point.

[image] Trying_to_learn: But do they have a message that is sent when they are pressed? 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)

Here's a decent thread... [image] How can I send a message from a ui_button inside an HTML template? Dashboard the data-action key contain special character, i.e. - you need to put qoute char (') to make it work. It will be SAVE

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.

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.

[image] Trying_to_learn: Is that the right size Look in Dev tools, the exact sizes are visible in there. Use the pointer to select an element then look in the styles.

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. [Screenshot from 2020-04-17 11-07-10] 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?

Node-RED

Node-RED Forum

CSS School, buttons and things not making sense

Dashboard

Steve-Mcl 17 April 2020 00:57 7

Here's a decent thread...

Topic		Replies	Views
Adding `output` function to buttons designed in `template` node Dashboard	71	6838	28 April 2020
Ui_template mvc and scope of context/flow/global stores Dashboard	126	3953	14 October 2020
Going in circles with `CSS` buttons Dashboard	7	883	9 June 2020
Tabs, groups and help with CSS structure Dashboard	203	9413	27 April 2020
CSS Styling ui-button Widgets on Dashboard 2 Share Your Projects dashboard-2	18	3392	6 December 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

CSS School, buttons and things not making sense

Related topics