Adding grid layout to tab widget changes spacing and size of inner widget

Question

When using Qt Designer to make a GUI I am getting inconsistent results between what is previewed in designer versus when it's actually used in code. The actual size of the widgets doesn't change but applying grid layout (or any layout) to a tab widget causes anything inside of the tab widget to be stretched out and not evenly padded as originally shown in Qt Designer.

Preview in Qt Designer (left) and preview when actually initialized in python (right):

Here's the .ui file generated in Qt Designer:

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setGeometry(QtCore.QRect(10, 10, 231, 201))
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.gridLayout_4 = QtWidgets.QGridLayout(self.frame)
        self.gridLayout_4.setObjectName("gridLayout_4")
        self.groupBox = QtWidgets.QGroupBox(self.frame)
        self.groupBox.setObjectName("groupBox")
        self.gridLayout_3 = QtWidgets.QGridLayout(self.groupBox)
        self.gridLayout_3.setObjectName("gridLayout_3")
        self.tabWidget = QtWidgets.QTabWidget(self.groupBox)
        self.tabWidget.setObjectName("tabWidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.gridLayout_2 = QtWidgets.QGridLayout(self.tab)
        self.gridLayout_2.setContentsMargins(0, 0, 0, 0)
        self.gridLayout_2.setObjectName("gridLayout_2")
        self.widget = QtWidgets.QWidget(self.tab)
        self.widget.setObjectName("widget")
        self.gridLayout_5 = QtWidgets.QGridLayout(self.widget)
        self.gridLayout_5.setContentsMargins(0, 0, 0, 0)
        self.gridLayout_5.setObjectName("gridLayout_5")
        self.groupBox_2 = QtWidgets.QGroupBox(self.widget)
        self.groupBox_2.setAutoFillBackground(True)
        self.groupBox_2.setTitle("")
        self.groupBox_2.setObjectName("groupBox_2")
        self.gridLayout = QtWidgets.QGridLayout(self.groupBox_2)
        self.gridLayout.setObjectName("gridLayout")
        self.pushButton = QtWidgets.QPushButton(self.groupBox_2)
        self.pushButton.setObjectName("pushButton")
        self.gridLayout.addWidget(self.pushButton, 0, 0, 1, 1)
        self.gridLayout_5.addWidget(self.groupBox_2, 0, 0, 1, 1)
        self.gridLayout_2.addWidget(self.widget, 0, 0, 1, 1)
        self.tabWidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.tabWidget.addTab(self.tab_2, "")
        self.gridLayout_3.addWidget(self.tabWidget, 0, 0, 1, 1)
        self.gridLayout_4.addWidget(self.groupBox, 0, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.groupBox.setTitle(_translate("MainWindow", "GroupBox"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "Tab 1"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2"))

And here is the code used to initialize the gui:

from PyQt5.QtWidgets import QMainWindow, QApplication

import sys
from ui import Ui_MainWindow

class App(QMainWindow, Ui_MainWindow):

    def __init__(self, parent: object = None) -> object:
        super(App, self).__init__(parent)
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    ex = App()
    ex.show()
    sys.exit(app.exec_())

You can also verify this yourself by creating a MainWindow > centralwidget > frame > groupbox > tabWidget > groupbox all with grid layout or some kind of layout applied.

I've also tried playing around a bunch with the sizing options for the widgets and the results are still the same. I really hope I don't have to resort to adding spacers all around the inside widget as that would be tedious and result in inconsistent spacing.

Any suggestions would be greatly appreciated as this is very frustrating and surprising it hasn't been addressed before. Thanks!

Maybe it's related to https://stackoverflow.com/questions/53469563 — eyllanesc, Jul 11 '19 at 00:51
@eyllanesc I've already included the .ui file and you can see from the imports that its using PyQt5. — jpxrc, Jul 11 '19 at 00:53
1) I have not asked you for the .py generated by the .ui but the .ui that is an xml. — eyllanesc, Jul 11 '19 at 00:55
2) PyQt5 has several versions: What is the output of `from PyQt5 import Qt` `print(Qt.PYQT_VERSION_STR)`? — eyllanesc, Jul 11 '19 at 00:58
@eyllanesc Sorry for the confusion. I'm not sure where to find the xml file? The Qt version I'm running is 5.11.2 — jpxrc, Jul 11 '19 at 02:17
Open the .ui file with any editor and you will see that its content is an XML — eyllanesc, Jul 11 '19 at 02:19

musicamante · Accepted Answer · 2019-07-11T03:49:31.953

Qt Designer automatically applies its default margins and spacings to layouts both when designing and previewing, even if they are not set in the "Form Settings..." dialog ("Form" menu). If you go to that dialog and check the "Layout Default" option, and then save the ui file again, you'll probably see the same result in both Designer and your program.

When designing GUIs in Designer you have to remember that every OS and style has different default "metrics", including layout margins and spacings. If you want specific values for every layout you'll need to manually set them in the layout properties, otherwise you can set default values for all the form layouts (and sub-layouts) using the aforementioned option, and then ensure that every layout has the default value set (not marked in "bold").

There's also another possibility: in PyQt5 it is possible to use QProxyStyle (which unfortunately wasn't available on PyQt4), allowing you to override specific methods that are used to draw and "organize" widgets. If you create a subclass of QProxyStyle you can override pixelMetric() and automatically set margins and spacings for the whole program, as long as you apply it to the main QApplication.

class MyStyle(QtWidgets.QProxyStyle):
    defaultMargin = 4
    defaultSpacing = 2
    margins = QtWidgets.QStyle.PM_LayoutLeftMargin, QtWidgets.QStyle.PM_LayoutTopMargin, QtWidgets.QStyle.PM_LayoutRightMargin, QtWidgets.QStyle.PM_LayoutBottomMargin
    spacings = QtWidgets.QStyle.PM_LayoutHorizontalSpacing, QtWidgets.QStyle.PM_LayoutVerticalSpacing

    def pixelMetric(self, metric, option=None, widget=None):
        if metric in self.margins:
            return self.defaultMargin
        elif metric in self.spacings:
            return self.defaultSpacing
        return QtWidgets.QProxyStyle.pixelMetric(self, metric, option, widget)

if __name__ == '__main__':
    app = QtWidges.QApplication(sys.argv)
    app.setStyle(MyStyle())
    [...]

Checking "Layout Default" under Form Settings fixed it. Thanks! — jpxrc, Jul 11 '19 at 02:21
You're welcome! :-) Just remember that it's good practice to keep layouts consistent along a single program. While it might not seem a big issue, it _can_ be distracting/annoying, even if it's a matter of a millisecond of attention from the user, and even if she/he may not even realize it; but it **does** matter. So if you do check the "Layout Default" option, ensure that you do the same for all of other forms, or all "similar" form layouts at least. I've also edited my answer to add another possibility: using QProxyStyles allows you to automatically set spacings/margins for the whole program. — musicamante, Jul 11 '19 at 03:50

Adding grid layout to tab widget changes spacing and size of inner widget

1 Answers1