Styling QGroupBox in Qt Design
-
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.
-
Hi,
From your description, these QGroupBox seem to be top level widgets, is that correct ?
-
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);
} -
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.
-
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 theQGroupBox
width? -
Sorry. I didn't set the layout.
-
@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
-
Thank you so much @Eddy. By following your tip I got the expected result using a
QLabel
and aQFrame
.I have added a vertical layout and inside it, I have added a
QLabel
(top) and aQFrame
(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.