Custom CSS for buttons - problem controlling font size

[colin-grierson]

I apologize if this is due to my lack of knowledge of CSS, I am very much a beginner

I want to use a button as my group name so I can have a refresh option without taking additional display space. All good but now I need to increase the button font size to match the group name font. I define a CSS class to left justify and enlarge the font, and set it on the button definition. This technique works for me with Text display widgets. However while the button text is left justified, the font is unchanged.

Examining the style inheritance for the button text I see

and further down

My controls are present, but are not being used - even though they are tagged 'Important'

• Initially I had only the font-size control, not --v-btn-size. Neither work

My controls do work if the 'default' controls are not present ... the display I get

... if default font-size is disabled the custom class font size is used

... if default --v-btn-size is disabled my --v-btn-size is used

[hotNipi]

Try this:

and CSS:

.header-button .v-btn__content{ font-size: 1.25rem; width: 100%; justify-content: flex-start; }

[colin-grierson]

Thanks hotNipi, that works perfectly - and teaches me about CSS... Is this correct?

• The first name, '.header-button' in this case, is just a name and Node-Red inserts this in the class list of the widget container.
• The second name, '.v-btn__content' in this case, controls where the CSS attributes are used within the widget container.

Thinking out loud Having to work at this level for something as simple as font size is undesirable, as is the inconsistent behaviour between the text widget (where the CSS does not need to be 'aimed') and button widget where it does. But I presume the widgets come from vuetify so their CSS structures are not under our control. Ideal would be to move the common controls, font, colour, size, background onto the node controls, probably in the appearance tab. Perhaps the Node-Red engine could insert a 'second name' - '.v-btn-content' for classes used on buttons ... this feels bad to me... the code would need to check there is no 'second name' already present - and some CSS controls probably need to be elsewhere anyway. Issue 535 suggests a mechanism for dynamic control of colour on text widgets. As a user I prefer visible options on the widget controls - or at least a hint, such as the dynamic CSS icon.

Thanks again for the fix and the lesson, and you guessed correctly that I really wanted 'justify-content', not 'justify-self: left'!

[hotNipi]

With DB1 the option to alter the CSS on widget level was quite of improvement. But it was and is just CSS without any magic. To make use of it, for sure it takes to understand basic principles of CSS rules but also to understand current conditions cos we deal with existing and working environment. By allowing quite heavy override it is open window to have less configurable options for widgets. And if there is less of configuration, widgets are more lightweight and more easily controllable and the maintenance cost will be lower.

• The first name, '.header-button' makes that specific (actually all where added) widget unique. So you can make CSS selector to address only those. Yes, it is the class name which is added to the widget.

• The second name, '.v-btn__content' is the CSS class which is applied to span element, in where the button label goes.

Now it is possible to make a CSS selector: .header-button .v-btn__content Which you may read as "select all elements where is class v-btn__content but only if they are children of element with class header-button" The rest is just the rules for that selection.

CSS is fun. But takes quite of time to learn.

[colin-grierson]

My feeling is that a tool such as Node-red dashboard should be able to dynamically control basic display attributes - font, colour, background colour etc without requiring knowledge of CSS - There is something wrong I think, when it is easier to create a multi variable graph than change the text size. However function comes first, second and third. Making appearance easy to control is way down my priority list - top for me is click through on tables and graphs :-) Thanks again Colin