Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.



  • @Taytoo
    Just to check: you mean does not work at run-time, right? I don't understand what it is you are doing in Designer?



  • @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 a StringList type?



  • @JonB I was using String, just tried StringList but it didn't work



  • @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 tried

    btnViewActions.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.


Log in to reply