Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-123873

CSS styling on QPushButton not respected when child is QHBoxLayout

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P2: Important
    • None
    • 6.6.1
    • Widgets: Style Sheets
    • None
    • OS: Arch Linux x86_64
      WM: Sway
    • Linux/Wayland

    Description

      Transparency and text color don't work together for QLabel within QHBoxLayout within QPushButton.

      Below you can find the code for three buttons:

      1. btn1 which is just a normal button with text
      2. btn2 which is a button with a label
      3. btn3 with a QHBoxLayout with 2 labels

      Without "border:0" all buttons have a red background without transparency but with the text visible and white.

      With "border:0" btn1 and btn2 are ok, but btn3 looses its text.

      #include<QApplication>
      #include<QPushButton>
      #include<QLabel>
      #include<QVBoxLayout>
      #include<QHBoxLayout>
      int main(int argc, char **argv)
      {
          QApplication app(argc, argv);
          auto window = new QWidget();
          auto layout = new QVBoxLayout(window);
      
          auto btn1 = new QPushButton("test1");
      
          auto btn2 = new QPushButton();
          auto labelBtn2 = new QLabel("test2", btn2);
      
          auto btn3 = new QPushButton();
          auto layoutBtn3 = new QHBoxLayout(btn3);
          auto labelBtn3_1 = new QLabel("test3_1");
          auto labelBtn3_2 = new QLabel("test3_2");
          layoutBtn3->addWidget(labelBtn3_1);
          layoutBtn3->addWidget(labelBtn3_2);
      
          layout->addWidget(btn1);
          layout->addWidget(btn2);
          layout->addWidget(btn3);
      
          window->setProperty("class", "window");
          window->setStyleSheet(
              ".window { background:rgba(0,0,0,.5); }"
              "QPushButton, QPushButton QLabel {"
                  "color:white;"
              "}"
              "QPushButton {"
                  "background-color:rgba(255,0,0,.5);"
                  "color:white;"
                  "border:0;" //<-- if not present, background is not transparent, but if present, text is no longer shown
              "}"
              );
          window->show();
      
          return app.exec();
      } 

      Without "border:0":

      With "border:0":

      I would expect btn3 to look like btn2 as in the last (second) screenshot

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            qt.team.quick.subscriptions Qt Quick and Widgets Team
            lira Lira X
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes