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 wit…

[image] Naitsa: 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 In the theme you can set a smaller overall row height [image] [image] Naitsa: I am playing around with the devtools right now and i found that the fixed …

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]

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.

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 affec…

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…

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.

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

[image] Steve-Mcl: --widget-row-height: 28px; height: var(--widget-row-height); Thank you so much, it worked perfectly!! You made my day. Hope you have a great one too!

CSS Styling in Dashboard 2.0

Dashboard

Colin 13 May 2025 06:14 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?

Topic		Replies	Views
Dashboard 2 button explanation Dashboard dashboard-2	3	263	16 March 2024
Dashboard element css classes Dashboard	14	9073	29 May 2021
Using css field in dashboard widget Dashboard node-red-dashboard	7	3793	28 January 2023
Dashboard Button Node - </>Class Field not working Dashboard	27	5911	1 December 2021
Dashboard Dropdown with custom CSS Dashboard node-red-dashboard	12	2030	13 May 2023

CSS Styling in Dashboard 2.0

Related topics