Assign multiple css classes to a widget
-
I'm creating a dynamic property "class" in Qt designer and assign it a css class from the stylesheet. It works fine, however, when I try to assign multiple classes with a blank space between them (as is standard with css) i.e. "FontColor HoverEffect" then none of class styling is applied.
Does Qt support multiple css classes for a widget?
-
@JonB
Here's whats in ui_*.h file:testLabel->setProperty("class", QVariant(QString::fromUtf8("GreenLabel ArialFont")));
I think I figured out the issue, not sure if its a bug in Qt or expected behavior though. I had styles defined as
QLabel["GreenLabel"]
{ color: rgb(0,240,0); }QLabel["ArialFont"]
{ font-family: "Arial"; }These were not working when combined, however, if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together. Also, if one of them is defined as a class specific to QLabel and other as plain class, then it only applies the plain class.
-
@JonB No it doesn't work at run-time or in Qt Designer.
Basically, I apply a stylesheet (containing several css classes) to the dialog in Qt Designer. Then for each widget that I want to apply the style, I add a dynamic property named "class" (in Qt Designer) and set its value to css class name. It works fine and the css style is applied immediately to the widget. However, when I try to apply two css style classes (e.g. one for color and other for text style), then none of them is applied.
-
@Taytoo said in Assign multiple css classes to an element:
I add a dynamic property named "class" (in Qt Designer)
Ahh, this is the bit I did not know you could do! I have now seen the green
+
button for this :)What Property Type did you give it? The default is
String
. Untested, but have you tried adding your values not as a space-separated string but as aStringList
type? -
@Taytoo
Maybe it's a design-time thing you can't do from Qt Designer, I don't know. What I do know is that it does work at run-time, which is only where I set this. I just triedbtnViewActions.setProperty("class", "buttonColorGreen colorRed")
and do get red text on green background, as expected. Verify this works for you in run-time code. You can also look in the generated
ui_*.h
file to see what actual code your design-time attempt produces. -
@JonB
Here's whats in ui_*.h file:testLabel->setProperty("class", QVariant(QString::fromUtf8("GreenLabel ArialFont")));
I think I figured out the issue, not sure if its a bug in Qt or expected behavior though. I had styles defined as
QLabel["GreenLabel"]
{ color: rgb(0,240,0); }QLabel["ArialFont"]
{ font-family: "Arial"; }These were not working when combined, however, if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together. Also, if one of them is defined as a class specific to QLabel and other as plain class, then it only applies the plain class.
-
@Taytoo said in Assign multiple css classes to a widget:
if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together.
Yes, my definitions are always dotted, like
.buttonColorGreen { background-color: rgba(185, 245, 144, 0.9); }
Otherwise, I don't know but you may have to do
QLabel[class="GreenLabel"]
as per https://doc.qt.io/Qt-5/stylesheet-syntax.html#selector-types. Actually from there it might have to be something like:
QLabel[class~="GreenLabel"]
I may be confusing Qt's classes with CSS/QSS classes....
-
as per https://doc.qt.io/Qt-5/stylesheet-syntax.html#selector-types. Actually from there it might have to be something like:
QLabel[class~="GreenLabel"]
I may be confusing Qt's classes with CSS/QSS classes....
As per CSS spec, this would match any class field which Has a list of space separated strings and it will find GreenLabel. So can't be used for multiple classes.
I guess the best way is to create dot based/plain classes and then assign those to widgets.