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

Can't set GroupBox title color with Qt 5.6



  • Is there a way to set the color for the GroupBox title?

    The Qt 5.6 reference documentation for the GroupBox control (that pops up via the F1 key iniside Qt Creator) mentions that there are 3 visual items (background, frame, label) to customize a GroupBox.

    But when i try to put the code snippet from the help docs for customizing the label of the groupbox into my own QML file, Qt complains with "Cannot assign to non-existent property 'label'".

    Were these 3 visual items removed in Qt 5.6? Is there any way to set the title color besides black?



  • @Jixer Hi, and welcome to the Qt forum! Please show us your code :-)



  • Hi and yes seeing code would make more sense.

    I just created a simple Qt Quick application where I created 3 tabs and in the first tab, I have a groupbox with three labels inside.

    I didn't want the default white background, so I made the background black. In doing so, I had to change the text of my controls to white. The only thing I cannot change the color of is the groupbox title.

    The code snippet from the help docs for customizing the label of the groupbox shows the following:

    label: Text {
      x: control.leftPadding
      width: control.availableWidth
    
      text: control.title
      font: control.font
      color: control.enabled ? "#353637" : "#bdbebf"
      elide: Text.ElideRight
      horizontalAlignment: Text.AlignLeft
      verticalAlignment: Text.AlignVCenter
    }
    

    Maybe I coded it incorrectly, but I tried to set the groupbox title color to blue in with the following code:

      label: Text {
         color: "blue"
         text: groupBox1.title
      }
    

    But doing so, causes an error where I can't see any of my controls (i.e., tab contents are blank). If I remove the above lines, then the controls show up, but the title color is black.

    Here's is my code (Tab2.qml and Tab3.qml are currently empty):

    main.qml:

    import QtQuick 2.6
    import QtQuick.Controls 1.5
    import QtQuick.Dialogs 1.2
    import QtQuick.Controls.Styles 1.4
    
    ApplicationWindow {
        visible: true
        width: 1024
        height: 768
        color: "#000000"
        title: qsTr("Test App")
    
      menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: console.log("Open action triggered");
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }
    
    MainForm {
      anchors.fill: parent
    
        TabView {
          id: tabView1
          anchors.fill: parent
          anchors.margins: 4
          x: 0
          y: 8
          width: parent.width
          height: 655
          anchors.rightMargin: 0
          anchors.bottomMargin: 0
          anchors.leftMargin: 8
          anchors.topMargin: 8
          currentIndex: 0
    
          style: TabViewStyle {
              frameOverlap: 1
                  tab: Rectangle {
                      color: styleData.selected ? "#666666" :"#494949"
                      border.color:  "#777777"
                      implicitWidth: Math.max(text.width + 4, 80)
                      implicitHeight: 20
                      radius: 2
                      Text {
                          id: text
                          anchors.centerIn: parent
                          text: styleData.title
                          color:  "white"
                      }
                  }
                  frame: Rectangle { color: "black" }
          }
    
          Tab {
            id: tab1
            source: "presets.qml"
            title: "Presets"
          }
    
          Tab {
            id: tab2
            source: "Tab2.qml"
            title: "Tab2"
          }
    
          Tab {
            id: tab3
            source: "Tab3.qml"
            title: "Tab3"
          }
        }
      }
    }
    

    Tab1.qml:

    import QtQuick 2.3
    import QtQuick.Controls 1.5
    import QtQuick.Dialogs 1.2
    
    Item {
      anchors.fill: parent
    
      GridView {
        id: gridViewPresets
         x: 0
         y: 23
         width: 1024
         height: 590
    
    cellWidth: 70
    cellHeight: 70
    
    GroupBox {
      id: groupBox1
      x: 8
      y: 0
      width: 990
      height: 197
      title: qsTr("Presets")
      label: Text {
         color: "blue"
         text: groupBox1.title
      }
    
      Label {
          id: label1
          x: 0
          y: 16
          width: 108
          height: 13
          color: "#ffffff"
          text: qsTr("Label 1:")
      }
    
      Label {
          id: label2
          x: 0
          y: 52
          width: 126
          height: 13
          color: "#ffffff"
          text: qsTr("Label 2:")
       }
      }
    }


  • Actually, I found something.

    If I replace

     import QtQuick.Controls 1.5
    

    with

     import Qt.labs.controls 1.0
    

    then the groupbox title will be blue. BUT the nice thick frame around the groupbox will be replaced with a thin line and the alignment of my controls will be off (everything is the way it should be when using
    QtQuick.Controls 1.5)

    Hopefully the label property of the groupbox will be included in an update to QtQuick.Controls.



  • Put items withing GroupBox inside an Layout (Row or Column). Than it will be placed correctly with Qt.labs control's GroupBox


Log in to reply