I wanna set check box margin ? alignment

Question

I made some Qdialog , when I execute code, the checkbox is not evenly aligned :

enter image description here

But I wanna like this :

Here's the code:

class SelectPay_Dialog2(Qdialog): 

    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setGeometry(500, 200, 400, 200)
        self.setWindowTitle("Window")


        label1 = QLabel("test  : ")
        label2 = QLabel("test  : ")
        label3 = QLabel("test : ")
        #
        label1.setFixedSize(80, 20)
        label2.setFixedSize(80, 20)
        label3.setFixedSize(80, 20)

        cb1 = QCheckBox('1week')
        cb2 = QCheckBox('2week')
        cb3 = QCheckBox('3week')
        cb4 = QCheckBox('4week')
        cb5 = QCheckBox('5week')
        cb6 = QCheckBox('6week')

        self.input_date_text1 = QLineEdit()
        self.input_date_text2 = QLineEdit()
        self.input_date_text1.setFixedSize(100, 25)
        self.input_date_text2.setFixedSize(100, 25)
        self.input_date_text1.setReadOnly(True)
        self.input_date_text2.setReadOnly(True)

        layout = QGridLayout()
        layout.addWidget(label1, 0, 0)
        layout.addWidget(label2, 2, 0)
        layout.addWidget(label3, 1, 0)

        layout.addWidget(self.input_date_text1, 2, 1)
        layout.addWidget(self.input_date_text2, 2, 2)
   
        layout.addWidget(cb1, 1, 1 )
        layout.addWidget(cb2, 1, 2 )
        layout.addWidget(cb3, 1, 3 )
        layout.addWidget(cb4, 1, 4)
        layout.addWidget(cb5, 1, 5)

        self.setLayout(layout)

score 0 · Accepted Answer · answered May 21 '21 at 09:47

As the name suggests, QGridLayout places items in a grid which has rows and columns. If you look more closely at the image, you'll see that the first two checkboxes are aligned to the line edit.

If you don't want this behavior, then you have different options, with all of them using a QHBoxLayout:

don't use a grid layout at all, but use a QVBoxLayout as main layout, and add QHBoxLayout for every "row"; this has the drawback that the first "column" could be unaligned, and that seems a requirement for your case;
use a QFormLayout, with addRow with a QHBoxLayout on the right;
add a QHBoxLayout with the correct column span;

The third case might be useful for situations in which you generally have a fixed number of widget on the right "side".
Here is how this could look for your case, considering the two line edits as "default" layout arrangement:

    checkLayout = QHBoxLayout()
    layout.addLayout(checkLayout, 1, 1, 1, 3)
    checkLayout.addWidget(cb1)
    checkLayout.addWidget(cb2)
    checkLayout.addWidget(cb3)
    checkLayout.addWidget(cb4)
    checkLayout.addWidget(cb5)

Note that I used a column span of 3. This ensures that the layout occupies 3 columns, and since only two are actually occupied (by the line edits), the result is that the remaining space will be only used for the required remaining width of the checkboxes.

A similarly related solution would require to add the line edits to their own QHBoxLayout, but also using addStretch() after them, in order to keep an empty spacing on their right.

thank you!!! I've been thinking about it for days.. it works very well !! — ja c, May 24 '21 at 08:51

score 0 · Answer 2 · answered May 21 '21 at 10:37

For complex layouts I recommend using Qt designer. You can translate ui files created with it to python code using pyuic5 tool.

main.py

from PyQt5 import QtWidgets, QtCore

from Ui_SelectPay_Dialog2 import Ui_SelectPay_Dialog2

class SelectPay_Dialog2(QtWidgets.QDialog):
    def __init__(self, parent = None):
        super().__init__(parent)
        ui = Ui_SelectPay_Dialog2()
        ui.setupUi(self)

if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    widget = SelectPay_Dialog2()
    widget.show()
    app.exec_()

Ui_SelectPay_Dialog2.py

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_SelectPay_Dialog2(object):
    def setupUi(self, SelectPay_Dialog2):
        SelectPay_Dialog2.setObjectName("SelectPay_Dialog2")
        SelectPay_Dialog2.resize(432, 150)
        self.gridLayout = QtWidgets.QGridLayout(SelectPay_Dialog2)
        self.gridLayout.setObjectName("gridLayout")
        self.label = QtWidgets.QLabel(SelectPay_Dialog2)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.label.sizePolicy().hasHeightForWidth())
        self.label.setSizePolicy(sizePolicy)
        self.label.setObjectName("label")
        self.gridLayout.addWidget(self.label, 0, 0, 1, 1)
        self.label_2 = QtWidgets.QLabel(SelectPay_Dialog2)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.label_2.sizePolicy().hasHeightForWidth())
        self.label_2.setSizePolicy(sizePolicy)
        self.label_2.setObjectName("label_2")
        self.gridLayout.addWidget(self.label_2, 1, 0, 1, 1)
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.cb1 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb1.setObjectName("cb1")
        self.horizontalLayout.addWidget(self.cb1)
        self.cb2 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb2.setObjectName("cb2")
        self.horizontalLayout.addWidget(self.cb2)
        self.cb3 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb3.setObjectName("cb3")
        self.horizontalLayout.addWidget(self.cb3)
        self.cb4 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb4.setObjectName("cb4")
        self.horizontalLayout.addWidget(self.cb4)
        self.cb5 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb5.setObjectName("cb5")
        self.horizontalLayout.addWidget(self.cb5)
        self.cb6 = QtWidgets.QCheckBox(SelectPay_Dialog2)
        self.cb6.setObjectName("cb6")
        self.horizontalLayout.addWidget(self.cb6)
        self.gridLayout.addLayout(self.horizontalLayout, 1, 1, 1, 1)
        self.label_3 = QtWidgets.QLabel(SelectPay_Dialog2)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.label_3.sizePolicy().hasHeightForWidth())
        self.label_3.setSizePolicy(sizePolicy)
        self.label_3.setObjectName("label_3")
        self.gridLayout.addWidget(self.label_3, 2, 0, 1, 1)
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.input_date_text1 = QtWidgets.QLineEdit(SelectPay_Dialog2)
        self.input_date_text1.setObjectName("input_date_text1")
        self.horizontalLayout_2.addWidget(self.input_date_text1)
        self.input_date_text2 = QtWidgets.QLineEdit(SelectPay_Dialog2)
        self.input_date_text2.setObjectName("input_date_text2")
        self.horizontalLayout_2.addWidget(self.input_date_text2)
        spacerItem = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_2.addItem(spacerItem)
        self.gridLayout.addLayout(self.horizontalLayout_2, 2, 1, 1, 1)
        self.gridLayout.setRowStretch(0, 1)
        self.gridLayout.setRowStretch(1, 1)
        self.gridLayout.setRowStretch(2, 1)

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

    def retranslateUi(self, SelectPay_Dialog2):
        _translate = QtCore.QCoreApplication.translate
        SelectPay_Dialog2.setWindowTitle(_translate("SelectPay_Dialog2", "Form"))
        self.label.setText(_translate("SelectPay_Dialog2", "test  : "))
        self.label_2.setText(_translate("SelectPay_Dialog2", "test  : "))
        self.cb1.setText(_translate("SelectPay_Dialog2", "1week"))
        self.cb2.setText(_translate("SelectPay_Dialog2", "2week"))
        self.cb3.setText(_translate("SelectPay_Dialog2", "3week"))
        self.cb4.setText(_translate("SelectPay_Dialog2", "4week"))
        self.cb5.setText(_translate("SelectPay_Dialog2", "5week"))
        self.cb6.setText(_translate("SelectPay_Dialog2", "6week"))
        self.label_3.setText(_translate("SelectPay_Dialog2", "test  : "))

dialog2.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>SelectPay_Dialog2</class>
 <widget class="QDialog" name="SelectPay_Dialog2">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>432</width>
    <height>150</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QGridLayout" name="gridLayout" rowstretch="1,1,1">
   <item row="0" column="0">
    <widget class="QLabel" name="label">
     <property name="sizePolicy">
      <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
       <horstretch>0</horstretch>
       <verstretch>0</verstretch>
      </sizepolicy>
     </property>
     <property name="text">
      <string>test  : </string>
     </property>
    </widget>
   </item>
   <item row="1" column="0">
    <widget class="QLabel" name="label_2">
     <property name="sizePolicy">
      <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
       <horstretch>0</horstretch>
       <verstretch>0</verstretch>
      </sizepolicy>
     </property>
     <property name="text">
      <string>test  : </string>
     </property>
    </widget>
   </item>
   <item row="1" column="1">
    <layout class="QHBoxLayout" name="horizontalLayout">
     <item>
      <widget class="QCheckBox" name="cb1">
       <property name="text">
        <string>1week</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="cb2">
       <property name="text">
        <string>2week</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="cb3">
       <property name="text">
        <string>3week</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="cb4">
       <property name="text">
        <string>4week</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="cb5">
       <property name="text">
        <string>5week</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="cb6">
       <property name="text">
        <string>6week</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
   <item row="2" column="0">
    <widget class="QLabel" name="label_3">
     <property name="sizePolicy">
      <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
       <horstretch>0</horstretch>
       <verstretch>0</verstretch>
      </sizepolicy>
     </property>
     <property name="text">
      <string>test  : </string>
     </property>
    </widget>
   </item>
   <item row="2" column="1">
    <layout class="QHBoxLayout" name="horizontalLayout_2">
     <item>
      <widget class="QLineEdit" name="input_date_text1"/>
     </item>
     <item>
      <widget class="QLineEdit" name="input_date_text2"/>
     </item>
     <item>
      <spacer name="horizontalSpacer">
       <property name="orientation">
        <enum>Qt::Horizontal</enum>
       </property>
       <property name="sizeHint" stdset="0">
        <size>
         <width>40</width>
         <height>20</height>
        </size>
       </property>
      </spacer>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

score -1 · Answer 3 · answered May 21 '21 at 09:05

-1

Where you wrote layout.addWidget(cb1, 1, 1 ) your bracket spacing is different to layout.addWidget(cb4, 1, 4) make them all equal and it should fix it

answered May 21 '21 at 09:05

Julia

69
8

I'm just trying to be helpful but considering you haven't provided a solution I don't know why you're being so rude. maybe have a look at the image and see how the first 3 are spaced whilst the last two aren't similarly to the brackets in the code. – Julia May 21 '21 at 09:22

I wanna set check box margin ? alignment

3 Answers3