Search code examples
cssqtstylesheet

Styling QGroupBox in Qt Design

If it is possible, how can I achieve the following result using the stylesheet property (CSS) in Qt Design?

enter image description here

I'm trying to use the following CSS:

QGroupBox  {
    border: 1px solid gray;
    border-color: #FF17365D;
    margin-top: 27px;
    font-size: 14px;
    border-radius: 15px;
}

QGroupBox::title  {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding: 5px 8000px 5px 8000px;
    background-color: #FF17365D;
    color: rgb(255, 255, 255);
}

But I'm getting this result:

enter image description here

I'm using Qt 5.3.

Solution

  • Based on the discussion found here https://forum.qt.io/topic/80053/styling-qgroupbox-in-qt-design/8 I'm afraid it is not possible to achieve the expected result using a QGroupBox (without setting a fixed padding to the QGroupBox::title).

    So as a workaround, suggested by Eddy, I have added a vertical layout and inside it, I have added a QLabel (top) and a QFrame (bottom) and set the following CSS:

    QLabel {
    qproperty-alignment: AlignCenter;
    border: 1px solid #FF17365D;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #FF17365D;
    padding: 5px 0px;
    color: rgb(255, 255, 255);
    max-height: 25px;
    font-size: 14px;
}
QFrame {
    border: 1px solid #FF17365D;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    The result can be seen below:

    enter image description here