QWidget Overflow

Question

I have a main QGridLayout on the dialog I'm working on. It's split into content-containers (QWidgets with their own QVBoxLayout) of varying sizes, each assigned a particular number of grid-columns within the grid layout (depending on their needs).

Each content-container holds some buttons. Some of these buttons should span across 2 content-containers. The way I'm trying to achieve this is by overflowing these 2-container buttons outside their layout, while keeping the size of the content-containers the same (what it was allocated according to the number of columns within the grid). I have no idea how to go about this, because either the size of the containers changes, or the QWidget doesn't overflow.

Is there a way to set some sort of overflow property on the button, or do I have to just place the buttons on the grid? I'm trying to avoid doing this because I think it could be messy once new requirements arise and I'll have to recalculate their positioning.

Here is an image of what I'm trying to do:

Here is the relevant code:

ModeDialog::ModeDialog(MainWindow *pMainWindow)
  : XDialog(pMainWindow, tr("Operating Mode"), true)
{
    XDialog::AddButton(tr("Exit"), QDialogButtonBox::AcceptRole);

ConstructStylingFromTemplates();

CSettings* Settings = pMainWindow->GetSettings();

QString SlotString1, SlotString2;
QGridLayout* mp_MainLayout = new QGridLayout();
mp_MainLayout->setContentsMargins(10, 30, 10, 20);

// Construct Channel Group Layouts with Channel Containers
for (int i = 0; i < 3; i++)
{
  switch(i)
  {
    case 0: { SlotString1 = "A"; SlotString2 = "B"; break; }
    case 1: { SlotString1 = "C"; SlotString2 = "D"; break; }
    case 2: { SlotString1 = "E"; SlotString2 = "F"; break; }
  }

  QHBoxLayout* ChannelGroupLayout = new QHBoxLayout();
  if (CSettings_RR::IsE1T1Channel(Settings, i*2))
  {
    AddChannelToChannelGroup(ChannelGroupLayout, SlotString1);
    AddChannelToChannelGroup(ChannelGroupLayout, SlotString2);
  }
  else if(CSettings_RR::IsPtpChannel(Settings, i*2))
  {
    AddChannelToChannelGroup(ChannelGroupLayout, SlotString1);
  }
  else if(CSettings_RR::IsOtaChannel(Settings, i*2))
  {
    AddChannelToChannelGroup(ChannelGroupLayout, SlotString1);
  }
  else
  {
    continue;
  }

  mp_MainLayout->addLayout(ChannelGroupLayout, 0, i*2, 1, 2);
}

SetContentLayout(mp_MainLayout);}

void ModeDialog::AddChannelToChannelGroup(QHBoxLayout* ChannelGroupLayout, QString SlotString)
{
  QVBoxLayout* ChannelLayout = new QVBoxLayout();

  // Add Label to Channel Layout
  XLabel* ChannelLabel = new XLabel("Channel " + SlotString, m_textSize, true, Qt::AlignCenter | Qt::AlignVCenter, this);
  ChannelLabel->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed);
  ChannelLayout->addWidget(ChannelLabel);

  // Add Container to Channel Layout
  QWidget* ChannelContainer = new QWidget();
  ChannelContainer->setStyleSheet(m_styleSheetChannelContainer);
  ChannelLayout->addWidget(ChannelContainer);

  //WIP - add buttons to container
  QVBoxLayout* ChannelContainerLayout = new QVBoxLayout();
  ChannelContainer->setLayout(ChannelContainerLayout);

  XPushButton* ModeButton = new XPushButton(tr("CLOCK"), 160, 40, this, true);
  ChannelContainerLayout->addWidget(ModeButton);
  //WIPEND

  // Add Channel Layout to Channel Group Layout
  ChannelGroupLayout->addLayout(ChannelLayout);
}

A `QWidget` can not overflow, but it is possible with `QGridLayout` to *span* cells and achieve something like what you want. **But** it is only possible if everything is in the same layout, so you cannot have intermediate `QWidget` or the borders like you show in the picture. You must put everything in the same `QGridLayout`. — ymoreau, Jan 17 '18 at 13:26
I managed to get what I want by using a QGridLayout on the dialog and adding each element (labels, containers and buttons) to that layout. Turned out to be a 9x4 grid in the case presented in the picture, with columnStretch's given to columns and specifying the start and end columns of buttons and centering them. Just had to make sure to add the containers first and then the buttons, to get the correct z-index order. — Claudiu, Jan 18 '18 at 15:28

score 3 · Answer 1 · answered Jan 17 '18 at 13:12

3

There is no way to overflow widgets in Qt, not even if you don't use a layout. A widget will always be limited to its parent's bounds.

answered Jan 17 '18 at 13:12

SteakOverflow

1,953
13
26

ymoreau · Accepted Answer · 2018-01-17T13:22:14.837

3

It is not possible to overflow using QWidgets.

But it is possible with QML.
By default, items will overflow and you have to manage their positions and sizes (and z-index to tell who overlaps who) : http://doc.qt.io/qt-5/qtquick-positioning-topic.html

You have to use QML layouts or set the item's parent property clip to true to avoid the overflow.

edited Jan 17 '18 at 13:22

answered Jan 17 '18 at 13:15

ymoreau

3,402
1
22
60

QWidget Overflow

2 Answers2

Linked