Styling QGroupBox in Qt Design



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

    alt text

    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:

    alt text

    I'm using Qt 5.3.


  • Lifetime Qt Champion

    Hi,

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



  • @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);
    }



  • 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:

    alt text

    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:

    alt text

    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?



  • @KelvinSP ,

    Sorry. I didn't set the layout.


  • Moderators

    @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 a QFrame.

    alt text

    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.


  • Moderators

    Well done.
    Glad I could help.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.