Can't set GroupBox title color with Qt 5.6

Jixer

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?

? Offline

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

Jixer

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:")
   }
  }
}

Jixer

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.

vladstelmahovsky

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