9

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 ?

Thalia
  • 13,637
  • 22
  • 96
  • 190

1 Answers1

14

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

Tarod
  • 6,732
  • 5
  • 44
  • 50
  • 1
    What if i have variable QGroupBox::title font-size value? The margin-top value will be wrong? – Chris P Jul 17 '23 at 13:07
  • As far as I know, the `font-size` should be added to `QGroupBox` , but yes, I think you need to recalculate the `margin-top` value. I have an example [here](https://github.com/ftena/qt-snippets/tree/master/stylesheet) – Tarod Jul 17 '23 at 14:21
  • Without padding in title there is a small space at the right of text. Do you know how can i clear? I want the title text to be connected with the border-top line. – Chris P Jul 17 '23 at 14:29
  • Not sure what you're looking for @chris-p, but in this example you have more or less the same: `QGroupBox { font: bold; font-size: 23px; border: 1px solid silver; border-radius: 6px; margin-top: 15px; } QGroupBox::title { subcontrol-origin: margin; left: 3px; padding: 0px 0px 10px 0px; }` – Tarod Jul 17 '23 at 19:46