CSS Styling in Dashboard 2.0

Dashboard
1

Hey there, i am new to Node-Red Dashboard 2.0.
I am struggling to give my button the CSS-Class i want. Whe ni double click the Node to open the Properties and give a "Optional CSS-Class", nothing happends. When i look with DevTools in the Broswer i cant see any new Class. I tried to set a class with a change-Node but i cant get that to work either. Please help me, i am struggling with something so basic!

(I use a template with CSS for all Pages)

Edit: i found my CSS-Class... in the parent div. Obviously my button doesnt get any of the styling except height and width and even that doesnt work correctly.

Have a good day, and thank you very much for your help!

2

Do you mean you are unable to set the class in the node config, or that the class does not appear when you inspect it in the browser?

What versions of node red and the dashboard are you using?

Can you try a different browser?

3

I can set the Class, but the button itself doesnt get it, only the div around it. Class ist "my-custom-button".
When i add any styling to the css class nearly nothing transfers to the button itself.

Screenshot 2025-05-13 081744
Screenshot 2025-05-13 081744712Ă—169 12.8 KB

4

I tried some more and i have to rephrase it. i CAN change the css like i can add a z-index, position absolute and placement etc. But i somehow cant change the "look" of the Button itself. Neither the backgroundcolor, nor the border-radius or the font color, etc.

5

Like most widgets they are not just a button or anchor or table or ... They are a div containing a bunch of things like spans, tooltips, labels, etc. Therefore, the class is put at the highest point so that you can affect everything within using an appropriate selector.

The reason you are not affecting the button will be because the selector you use in your CSS is not of sufficient specificity.

6

Thanks:)
Really good point to look for.
And i found the solution. I was just more specific :joy:

In the CSS Template i used my class ("my-custom-button") and then after that i styled all buttons in the div like this:

.my-custom-button {
...
}

.my-custom-button button{
...
}

I just cant get the min-height away. No matter how small i make the height it stays at least 48px

Edit: Inherits the height from the --widget-row-height. Still looking for a workaround

7

You can adjust the overall dashboard density in the dashboard settings if that helps?

In cases like yours, what I tend to do is open the devtools and play with the styles on the various elements within the widget until it does what I like. Then I replicate that in CSS.

8

I am playing around with the devtools right now and i found that the fixed Row Height is my problem.

In the settings i can neither change it to a custom amount, nor tell the button to take the height i gave him in CSS

9

In the theme you can set a smaller overall row height

image
image480Ă—610 17.3 KB

Here is a working demo:

image
image1106Ă—163 10 KB

ui-template (CSS mode)

.my-smaller-button {
    --widget-row-height: 28px;
    height: var(--widget-row-height);
}
1 Like
10

Thank you so much, it worked perfectly!!

You made my day.
Hope you have a great one too!

2 Likes