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

GroupBox styling



  • Is it possible to style a GroupBox? I'm mainly interested in changing the font size of the title but it doesn't seem possible since it's a hardcoded Text element.
    Just checking before filing a bug report.



  • Yes you can style a QGroupBox using interface designer or by calling
    @
    groupBox->setStyleSheet(QStringLiteral("QGroupBox{border:2px solid gray;border-radius:5px;margin-top: 1ex;} QGroupBox::title{subcontrol-origin: margin;subcontrol-position:top center;padding:0 3px;}"));
    @

    I've found the style in the example somewhere in internet.



  • Hey thanks for answering but I'm talking about GroupBox from Qt Quick Controls...



  • Right. I need to look on forum title before answering :-)

    Take a look "here...":http://qt-project.org/wiki/QmlStyling#bfb558a53c8289aef248af782e7c5616

    Approach 1 should do the trick.



  • I read that before but unfortunately it doesn't work with GroupBoxes. With CheckBoxes for example you can use the "style" property to define a custom component for the label but a GroupBox doesn't have such a property. You just have a "title" property (for the header) which asks for a string, so it doesn't seem like you can customise it. So for now I fake it by not setting a title in the GroupBox and putting a custom Text element on the top of it but it kind of defeats the purpose of having a title property in the GroupBox component. I'm just asking here if I'm missing something obvious.



  • Hello, I did not found any GroupBoxStyle component but I create it myself.
    The GroupBox component has the "style" property you can assign even if not documented.

    So it is a bit of a hack but it works. The only thing I did not manage to style is the checkbox of the group box when it is checkable.

    Example code of GroupBoxStyle.qml (random colors :p)
    @
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Controls.Styles 1.1
    import QtQuick.Controls.Private 1.0

    // TODO: manage checkable group boxes
    Style {
    property Component panel: Rectangle {
    anchors.fill: parent
    anchors.leftMargin: -5
    anchors.rightMargin: -5
    anchors.bottomMargin: -2
    anchors.topMargin: -titleRect.height / 2 - 5

        border.color: "red"
        border.width: 2
        radius: 5
        gradient: Gradient {
            GradientStop { position: 0; color: "blue" }
            GradientStop { position: 1; color: "green" }
        }
    
        Rectangle {
            id: titleRect
            anchors.fill: titleText
            anchors.leftMargin: -5
            anchors.rightMargin: -5
            anchors.bottomMargin: -1
            anchors.topMargin: -1
    
            border.color: control.activeFocus ? "darkgreen" : "lightgreen"
            border.width: 1
            radius: 5
            gradient: Gradient {
                GradientStop { position: 0; color: "blue" }
                GradientStop { position: 1; color: "green" }
            }
    
        }
    
        Text {
            id: titleText
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.top
            anchors.bottomMargin: -titleRect.height / 2.0
            text: control.title
            color: control.enabled ? "white" : "grey"
            renderType: Text.NativeRendering
            font.italic: !control.enabled
            font.weight: Font.Bold
            font.pointSize: 10
        }
    
    }
    

    }
    @



  • Thanks, that's interesting. I tried to adapt your code to my needs but I was going crazy with the anchors and margins so I think I'm going to settle with my first workaround (putting a custom Text on the top of it) since it works for me already.
    I also found out that a suggestion about this issue has already been posted on the "Qt bugtracker":https://bugreports.qt-project.org/browse/QTBUG-33243 so wait and see!



  • sfabry thank you for the example.
    vitala you can add Style into you GroupBox without adding new style file.

    Here is what I've made from sfabry's example.

    • main.qml
      @
      import QtQuick 2.1
      import QtQuick.Controls 1.0
      import QtQuick.Controls.Private 1.0

    ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480

    GroupBox {
        anchors.centerIn: parent
        style: Style {
            property Component panel: Rectangle {
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.top
                    text: control.title
                    color: control.enabled ? "red" : "gray"
                    renderType: Text.NativeRendering
                    font.italic: !control.enabled
                    font.weight: Font.Bold
                    font.pointSize: 18
                }
            }
        }
        title: qsTr("The Title in Red")
        enabled: true
    
        Column {
            spacing: 2
            CheckBox {
                text: qsTr("Update system")
            }
            CheckBox {
                text: qsTr("Update applications")
            }
            CheckBox {
                text: qsTr("Update documentation")
            }
        }
    }
    

    }
    @


Log in to reply