QPushButton changes size of widgets in layout

Question

This problem is driving me insane and I can't seem to find a logical answer. I'm pretty new to this so please bear with.

I've been creating an application where I create a vertical 'navigation bar' and need to add QPushButtons dynamically. I've noticed that the horizontal position of a label in a QVBox changes when a QPushButton is added to it.

I've created a minimal version:

Before Adding QPushButton:

Label reaches the edge of the application

After adding QPushButton:

Label width is reduced slightly

Here is the code I'm using to dynamically add the QPushButton:

void MainWindow::on_pushButton_clicked()
{
    QPushButton *newButton = new QPushButton("Test");
    newButton->setContentsMargins(0,0,0,0);
    newButton->setStyleSheet("margin: 0; padding: 0;");
    ui->verticalLayout->setMargin(0);
    ui->verticalLayout->setContentsMargins(0,0,0,0);

    // add new push button inside VBox
    ui->verticalLayout->addWidget(newButton);
}

.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>203</width>
    <height>224</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QWidget" name="verticalLayoutWidget">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>201</width>
      <height>151</height>
     </rect>
    </property>
    <layout class="QVBoxLayout" name="verticalLayout">
     <item>
      <widget class="QLabel" name="label">
       <property name="styleSheet">
        <string notr="true">border: 1px solid white;</string>
       </property>
       <property name="text">
        <string>TextLabel</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>180</y>
      <width>181</width>
      <height>32</height>
     </rect>
    </property>
    <property name="text">
     <string>Add Push Button To VBox</string>
    </property>
   </widget>
  </widget>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

As you can see setting the margins on both the QPushButton and the layout don't seem to have any effect. Is there anyone who could shed some light on this issue?

Answer 1

Let's analyze your .ui with the help of Qt Designer, if we stretch the window you get the following:

As you can see the layout only affects the QLabel, so the initial button will not be handled by the layout, but the added button will be. Therefore, you do not observe a similar behavior.

The solution is to restructure the design using the following structure:

QMainWindow
└── QVBoxLayout
    ├── QLabel
    └── QWidget
        └── QVBoxLayout
            └── QPushButton

You must change the size policy of the QWidget to take the minimum height by setting Maximum in Vertical Policy:

And in that second layout add the button. The .ui is the following:

<?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>335</width>
    <height>303</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout_2">
    <item>
     <widget class="QLabel" name="label">
      <property name="styleSheet">
       <string notr="true">border: 1px solid white;</string>
      </property>
      <property name="text">
       <string>TextLabel</string>
      </property>
     </widget>
    </item>
    <item>
     <widget class="QWidget" name="widget" native="true">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Preferred" vsizetype="Maximum">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout">
       <item>
        <widget class="QPushButton" name="pushButton">
         <property name="text">
          <string>Add Push Button To VBox</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

Then it is no longer necessary to modify the button:

void MainWindow::on_pushButton_clicked()
{
    QPushButton *newButton = new QPushButton("Test");
    ui->verticalLayout->addWidget(newButton);
}

Obtaining the following: