Search code examples
qtqtstylesheetsqgroupbox

Adjust title position in a QGroupBox (using style sheets)


I am trying to style a QGroupBox to match certain design requirements:

enter image description here

Note - the group title on top should be on the left but past the box curvature.

With the following style sheet, I get the images below (second image if I remove the word "left"):

QGroupBox {
    font: bold; 
    border: 1px solid silver;
    border-radius: 6px;
    margin-top: 6px;
}
QGroupBox::title {
    subcontrol-origin:  margin;
    subcontrol-position: top left;    // for second image:  top; 
    padding: 0 2px 0 2px;
}

enter image description here enter image description here

So, it seems what I want is subcontrol-position: top left; but with an added offset. I could not find that anywhere.

Adding padding erases the line, so it is not what I want.

There is one option I found just now - a different option for subcontrol-origin::

QGroupBox::title {
    subcontrol-origin:  padding;
    subcontrol-position: top left; 
    padding: -16 12px 0 12px;
}

It looks almost right - but the border now cuts through the title.

enter image description here

How can I move the title of the group box, so that it is still on left but past the box curvature, and the curvature to stay visible, such as in the design ?


Solution

  • Applying the following style:

    QGroupBox {
        font: bold;
        border: 1px solid silver;
        border-radius: 6px;
        margin-top: 6px;
    }
    
    QGroupBox::title {
        subcontrol-origin: margin;
        left: 7px;
        padding: 0px 5px 0px 5px;
    }
    

    I get something like this:

    enter image description here