weeCoder weeCoder - 1 month ago 22
Python Question

How to customise QGroupBox title in PyQt5?

Here's a piece of code that creates a simple QGroupBox:

from PyQt5.QtWidgets import (QApplication, QWidget,
QGroupBox, QGridLayout)

class QGroupBoxTest(QWidget):
def __init__(self):
super().__init__()
self.initUI()

def initUI(self):
gb = QGroupBox()
gb.setTitle('QGroupBox title')

appLayout = QGridLayout()
appLayout.addWidget(gb, 0, 0)
self.setLayout(appLayout)

self.setWindowTitle('QGroupBox test window')
self.setGeometry(300, 300, 300, 200)

if __name__ == "__main__":

import sys

app = QApplication(sys.argv)
test = QGroupBoxTest()
test.show()

sys.exit(app.exec_())


and here's what the output looks like to me:

qgb-1.jpg

Now let's say I want to add some style to it and I do this by adding this line to the initUI method:

gb.setStyleSheet("border: 1px solid gray; border-radius: 5px")


here's the output:

qgb-1.jpg

As can be clearly seen from the pic, the title has ended up inside the frame and now is overlapping the frame border.

So I have three questions actually:


  1. Why did the title move?

  2. How do I move it about and place it wherever I want (if possible)?

  3. What if I simply want to round off border corners without specifying the border-style property. Let's say I want the border-style to stay the same as in the first pic but with rounded corners. How do I do that?


Answer

1) Probably that's the default QT placement, in the first image the platform style is used, and its take care of borders and title placement, when you change the stylesheet you override something and you get the ugly placement.

2) You can control the "title" position using the QGroupBox:title controls, for example:

gb.setStyleSheet('QGroupBox:title {'
                 'subcontrol-origin: margin;'
                 'subcontrol-position: top center;'
                 'padding-left: 10px;'
                 'padding-right: 10px; }')

will result in something like this:

title

3) My suggestion is to create different strings for the stylesheet attributes you want to change, then compose them to create the style you want.

Comments