QFrame and Layout, please help

q&a
1

Hi,

I am Be Hai Nguyen, from Melboure, Australia.

I have only started to learn PyQt6 in the past 2 weeks.

I am seeking helps with the following issue, please.

Basically, I have pretty much a run-of-the-mill data entry form, which I would like to keep centred vertically and horizontally as the form changes sizes.

– Please refer to the attached UI code of the form.

The black-boxes are QFrame: I turned on the borders to aid during the design process.

I have not properly lined the labels and inputs up yet, so please disregard the spaces.

It is usuable… But does not looke very nice. I would like to apply some kind of layout to make the form better.

But as soon as I select a layout, BY HIGHLIGHTING ( SELECTING ) THE CONTAINING QFRAME, and select a layout, Qt Designer changes to the windows to something seen in the screenshot below:

04
041054×792 14.3 KB

What I have done wrong, please? How should I go about achieving what I would like to do, please?

Following is the UI code of the form:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>1020</width>
    <height>740</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Learn FastAPI Employees Maintenance</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <widget class="QFrame" name="leftFrame">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Ignored" vsizetype="Preferred">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>40</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>100</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="frameShape">
       <enum>QFrame::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Plain</enum>
      </property>
     </widget>
    </item>
    <item row="0" column="1">
     <widget class="QFrame" name="containerFrame">
      <property name="frameShape">
       <enum>QFrame::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Plain</enum>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout">
       <item>
        <widget class="QFrame" name="frame">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>50</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Plain</enum>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_2">
          <item>
           <widget class="QLabel" name="label">
            <property name="font">
             <font>
              <pointsize>12</pointsize>
              <weight>75</weight>
              <bold>true</bold>
             </font>
            </property>
            <property name="text">
             <string>Employee Detail</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
       <item>
        <widget class="QFrame" name="frame_2">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>200</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Plain</enum>
         </property>
         <widget class="QLabel" name="label_2">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>30</y>
            <width>91</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>Employee Number</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="empNo">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>30</y>
            <width>111</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_3">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>70</y>
            <width>47</width>
            <height>13</height>
           </rect>
          </property>
          <property name="text">
           <string>Email</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="email">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>70</y>
            <width>291</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_5">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>120</y>
            <width>121</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>Birth Date (dd/mm/yyy)</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="birthDate">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>120</y>
            <width>141</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_6">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>160</y>
            <width>111</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>First Name</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="firstName">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>160</y>
            <width>301</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_7">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>210</y>
            <width>131</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>Last Name</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="lastName">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>200</y>
            <width>301</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_8">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>260</y>
            <width>121</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>Gender</string>
          </property>
         </widget>
         <widget class="QComboBox" name="gender">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>250</y>
            <width>131</width>
            <height>22</height>
           </rect>
          </property>
         </widget>
         <widget class="QLabel" name="label_9">
          <property name="geometry">
           <rect>
            <x>30</x>
            <y>310</y>
            <width>131</width>
            <height>16</height>
           </rect>
          </property>
          <property name="text">
           <string>Hire Date (dd/mm/yyy)</string>
          </property>
         </widget>
         <widget class="QLineEdit" name="hireDate">
          <property name="geometry">
           <rect>
            <x>170</x>
            <y>310</y>
            <width>151</width>
            <height>20</height>
           </rect>
          </property>
         </widget>
        </widget>
       </item>
       <item>
        <widget class="QFrame" name="frame_3">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>70</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Plain</enum>
         </property>
         <layout class="QHBoxLayout" name="horizontalLayout">
          <item>
           <widget class="QPushButton" name="saveEmpBtn">
            <property name="text">
             <string>Save</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="newEmpBtn">
            <property name="text">
             <string>New</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="empSearchBtn">
            <property name="text">
             <string>Search Employees</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item row="0" column="2">
     <widget class="QFrame" name="rightFrame">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Ignored" vsizetype="Preferred">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>40</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>100</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="frameShape">
       <enum>QFrame::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Plain</enum>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>1020</width>
     <height>21</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

Thank you and best regards,

…behai.

2

Hi @behai-nguyen
I’m not suer what is you end goal, maybe you can draw example form you try to achieved?

1 Like
3

Good afternoon Michal,

Thank you for the reply. It is a fair question. I did try to attach the result, but I can attach only one as a new user.

This is how it looks at design time:

01
011050×787 16.3 KB

4

…and at runtime, it looks like:

02
021920×1040 18.1 KB

5

…and with the main screen resized to be bigger than this child screen:

03
031920×1040 21.2 KB

My objective is trying to get the labels and the fields to align with a grid or a form. But when I select the container frame, and apply a layout to the container frame. The entire screen gets messed up as shown in the original post.

Thank you and best regards,

…behai.

6

Ok got it… the trick is to use FormLayout for frame_2 and set sizePolicy for left and right frames to minimum.
image

See chnage UI file:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>1215</width>
    <height>775</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Learn FastAPI Employees Maintenance</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="2">
     <widget class="QFrame" name="rightFrame">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>100</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>16777215</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="frameShape">
       <enum>QFrame::Shape::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Shadow::Plain</enum>
      </property>
     </widget>
    </item>
    <item row="0" column="1">
     <widget class="QFrame" name="containerFrame">
      <property name="frameShape">
       <enum>QFrame::Shape::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Shadow::Plain</enum>
      </property>
      <layout class="QGridLayout" name="gridLayout_2">
       <item row="0" column="0">
        <widget class="QFrame" name="frame">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>50</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Shape::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Shadow::Plain</enum>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_2">
          <item>
           <widget class="QLabel" name="label">
            <property name="font">
             <font>
              <pointsize>12</pointsize>
              <bold>true</bold>
             </font>
            </property>
            <property name="text">
             <string>Employee Detail</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
       <item row="2" column="0">
        <widget class="QFrame" name="frame_3">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>70</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Shape::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Shadow::Plain</enum>
         </property>
         <layout class="QHBoxLayout" name="horizontalLayout">
          <item>
           <widget class="QPushButton" name="saveEmpBtn">
            <property name="text">
             <string>Save</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="newEmpBtn">
            <property name="text">
             <string>New</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="empSearchBtn">
            <property name="text">
             <string>Search Employees</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
       <item row="1" column="0">
        <widget class="QFrame" name="frame_2">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>200</height>
          </size>
         </property>
         <property name="frameShape">
          <enum>QFrame::Shape::Box</enum>
         </property>
         <property name="frameShadow">
          <enum>QFrame::Shadow::Plain</enum>
         </property>
         <layout class="QFormLayout" name="formLayout">
          <item row="0" column="0">
           <widget class="QLabel" name="label_2">
            <property name="text">
             <string>Employee Number</string>
            </property>
           </widget>
          </item>
          <item row="0" column="1">
           <widget class="QLineEdit" name="email"/>
          </item>
          <item row="1" column="0">
           <widget class="QLabel" name="label_3">
            <property name="text">
             <string>Email</string>
            </property>
           </widget>
          </item>
          <item row="1" column="1">
           <widget class="QLineEdit" name="empNo"/>
          </item>
          <item row="3" column="1">
           <widget class="QLineEdit" name="birthDate"/>
          </item>
          <item row="2" column="1">
           <widget class="QLineEdit" name="firstName"/>
          </item>
          <item row="2" column="0">
           <widget class="QLabel" name="label_5">
            <property name="text">
             <string>Birth Date (dd/mm/yyy)</string>
            </property>
           </widget>
          </item>
          <item row="3" column="0">
           <widget class="QLabel" name="label_6">
            <property name="text">
             <string>First Name</string>
            </property>
           </widget>
          </item>
          <item row="4" column="0">
           <widget class="QLabel" name="label_7">
            <property name="text">
             <string>Last Name</string>
            </property>
           </widget>
          </item>
          <item row="4" column="1">
           <widget class="QLineEdit" name="lastName"/>
          </item>
          <item row="5" column="0">
           <widget class="QLabel" name="label_8">
            <property name="text">
             <string>Gender</string>
            </property>
           </widget>
          </item>
          <item row="5" column="1">
           <widget class="QComboBox" name="gender"/>
          </item>
          <item row="6" column="0">
           <widget class="QLabel" name="label_9">
            <property name="text">
             <string>Hire Date (dd/mm/yyy)</string>
            </property>
           </widget>
          </item>
          <item row="6" column="1">
           <widget class="QLineEdit" name="hireDate"/>
          </item>
         </layout>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item row="0" column="0">
     <widget class="QFrame" name="leftFrame">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>100</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>16777215</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="frameShape">
       <enum>QFrame::Shape::Box</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Shadow::Plain</enum>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>1215</width>
     <height>33</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>
7

Hi @ Michal_Plichta,

Thank you very much for your kindness. This is what I am looking for.

I appreciate it very much.

Best regards,

…behai.

1 Like