Styling QGroupBox in Qt Design

[KelvinSP]

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

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:

I'm using Qt 5.3.

[SGaist]

Hi,

From your description, these QGroupBox seem to be top level widgets, is that correct ?

[Vinod Kuntoji]

@KelvinSP ,

Try this stylesheet.

QGroupBox {
border: 1px solid gray;
border-color: #FF17365D;
margin-top: 27px;
font-size: 14px;
border-radius: 15px;
}
QGroupBox::title {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 2px 82px;
background-color: #FF17365D;
color: rgb(255, 255, 255);
}

[KelvinSP]

Hi @SGaist , what do you mean with top level widgets? Is it a widget without a parent? If this is correct, in this example they are top level widgets, but in my application, they are not. I pretend to apply the stylesheet to the parent so it is applied to the children.

[KelvinSP]

Thanks a lot @Vinod-Kuntoji. I have tried to apply the stylesheet that you suggested and I got the following result:

Changing your example to the following CSS:

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

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 5px 150px;
    background-color: #FF17365D;
    color: rgb(255, 255, 255);
}

I got the following result:

It is almost the result that I'm looking for, the only problem is that I have to set the padding (left and right) manually, based on the QGroupBox width (e.g. padding: 5px 150px;). Is there some way that I can set it automatically based on the QGroupBox width?

[Vinod Kuntoji]

@KelvinSP ,

Sorry. I didn't set the layout.

[Eddy]

@KelvinSP said in Styling QGroupBox in Qt Design:

Is there some way that I can set it automatically based on the QGroupBox width?

AFAIK there is not.
You could try another path : combining 2 widgets : top widget = title = QLabel with text and bottom widget = QFrame.

Hope it helps.

Eddy

[KelvinSP]

Thank you so much @Eddy. By following your tip I got the expected result using a QLabel and a QFrame.

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 only issue is that I already have some QGroupBox in my application, but I'm sure I can change it easily. Thanks again.

[Eddy]

Well done.
Glad I could help.