Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Assign multiple css classes to a widget
Forum Updated to NodeBB v4.3 + New Features

Assign multiple css classes to a widget

Scheduled Pinned Locked Moved Solved General and Desktop
9 Posts 2 Posters 3.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    Taytoo
    wrote on last edited by Taytoo
    #1

    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?

    JonBJ 1 Reply Last reply
    0
    • JonBJ JonB

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

      T Offline
      T Offline
      Taytoo
      wrote on last edited by
      #7

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

      JonBJ 1 Reply Last reply
      0
      • T Taytoo

        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?

        JonBJ Offline
        JonBJ Offline
        JonB
        wrote on last edited by
        #2

        @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?

        T 1 Reply Last reply
        0
        • JonBJ JonB

          @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?

          T Offline
          T Offline
          Taytoo
          wrote on last edited by
          #3

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

          JonBJ 1 Reply Last reply
          0
          • T Taytoo

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

            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by
            #4

            @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?

            T 1 Reply Last reply
            0
            • JonBJ JonB

              @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?

              T Offline
              T Offline
              Taytoo
              wrote on last edited by
              #5

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

              JonBJ 1 Reply Last reply
              0
              • T Taytoo

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

                JonBJ Offline
                JonBJ Offline
                JonB
                wrote on last edited by JonB
                #6

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

                T 1 Reply Last reply
                0
                • JonBJ JonB

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

                  T Offline
                  T Offline
                  Taytoo
                  wrote on last edited by
                  #7

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

                  JonBJ 1 Reply Last reply
                  0
                  • T Taytoo

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

                    JonBJ Offline
                    JonBJ Offline
                    JonB
                    wrote on last edited by
                    #8

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

                    T 1 Reply Last reply
                    1
                    • JonBJ JonB

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

                      T Offline
                      T Offline
                      Taytoo
                      wrote on last edited by
                      #9

                      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.

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved