Search code examples
c++user-interfaceqt5qt-designerqtabwidget

QTabWidget Content Not Expanding


Attached is an example of the QT Designer with my issue. My goal is to get any content inside (in particular the lineEdit) to expand to the far right of QTabWidget its within.

If you notice I have the tab selected in the picture and it says there is no layout currently (as indicated by the red no smoking looking symbol on it). When I try to add a layout to it using the buttons above the tabs (for horizontal, vertical, grid, form, etc...), no matter what I do it doesn't change the tabs layout but changes the very top level widgets layout instead which I don't want because that is giving the QTabWidget its ability to take on whatever the size of the window is.

I tried giving a horizontal and vertical layout to the elements within the tab thinking that might work but it didn't work either as my next attached image shows. My hunch is because the tab has no layout, any layouts within will not be honored.

QTabWidget Attempt With Layout On Items Within Tab

Any help is appreciated. I've spent hours and can't figure it out for the life of me...!

QTabWidget Not Expanding Example Image

Below is the UI XML:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>xMarket</class>
 <widget class="QWidget" name="xMarket">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>737</width>
    <height>421</height>
   </rect>
  </property>
  <property name="sizePolicy">
   <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
    <horstretch>0</horstretch>
    <verstretch>0</verstretch>
   </sizepolicy>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <property name="layoutDirection">
   <enum>Qt::LeftToRight</enum>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout">
   <item>
    <widget class="QTabWidget" name="xMarketTabWidget">
     <property name="layoutDirection">
      <enum>Qt::LeftToRight</enum>
     </property>
     <widget class="QWidget" name="tab">
      <attribute name="title">
       <string>Tab 1</string>
      </attribute>
      <widget class="QLineEdit" name="lineEdit">
       <property name="geometry">
        <rect>
         <x>240</x>
         <y>30</y>
         <width>113</width>
         <height>21</height>
        </rect>
       </property>
      </widget>
      <widget class="QLabel" name="label">
       <property name="geometry">
        <rect>
         <x>150</x>
         <y>30</y>
         <width>59</width>
         <height>16</height>
        </rect>
       </property>
       <property name="text">
        <string>Search:</string>
       </property>
      </widget>
     </widget>
     <widget class="QWidget" name="tab_2">
      <attribute name="title">
       <string>Tab 2</string>
      </attribute>
     </widget>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

Solution

  • To set the layout on a tab, you first need to select its parent tab-widget.

    You can do this either by selecting it by name in the Object Inspector (i.e. by clicking on xMarketTabWidget in your example), or by simply clicking on an appropriate tab in its tab-bar. The parent tab-widget must have a selection rectangle around it before you can set a layout on one of its tabs.

    Once you've done that, you can click the Lay Out Horizontally or Lay Out in a Grid button on the Designer toolbar to set an appropriate layout for your tab. But note that a tab must have at least one child widget before you can set a layout on it - the layout buttons will all be disabled for empty tabs.