QGridLayout: widgets don't align properly

Byron Lai

Please take a look at the screenshot
The left edge of 'Option 2' checkbox didn't align with that of 'Option 1' checkbox

!http://i.imgur.com/CKSzl.png(layout)!

Here is the code in Python

@label1 = QLabel('Question 1')
label2 = QLabel('Question 2')
line_edit = QLineEdit()
check_box1 = QCheckBox('Option 1')
check_box2 = QCheckBox('Option 2')
combo_box = QComboBox()

inner_layout = QHBoxLayout()
inner_layout.addWidget(check_box2)
inner_layout.addWidget(combo_box)

outer_layout = QGridLayout()
outer_layout.addWidget(label1, 0, 0)
outer_layout.addWidget(label2, 1, 0)
outer_layout.addWidget(line_edit, 0, 1)
outer_layout.addWidget(check_box1, 1, 1)
outer_layout.addLayout(inner_layout, 2, 1)

window = QWidget()
window.setLayout(outer_layout)
window.show()@

Eddy

what is the margin of inner_layout?

By default this is not 0 I think.

Byron Lai

Thanks Eddy
I have tried inner_layout.setContentsMargins(0, 0, 0, 0) but it has no effect

ludde

Could it be that the inner_layout does not have a stretch, which means the left-over space is distributed evenly? What if you add inner_layout.addStretch() after adding the widgets?

Eddy

QGridLayout is capable of using 3 rows, 3 columns as you need (even more if wanted)
just don't add the 1,2 and 2, 0 widgets.
only use 0,0 0,1 0,2 1,0 1,1 2,1 2,2.

You don't need inner_layout at all and your problem will vanish.

Edit : in a table format :
x | x | x
x | x | 0
0 | x | x
only put widgets on the x's

Byron Lai

ludde, inner_layout.addStretch() didn't work either.
I think the ComboBox has consumed the extra space

ludde

Right, in that case I would do what Eddy suggests above. When adding the line edit, you'll have to do something like @outer_layout.addWidget(line_edit, 0, 1, 1, 2)@ to make it span two columns.

Eddy

@ Ludde : Exactly what i was trying to add after reading my post. The overloaded function with span can solve it.

Byron Lai

I didn't show you the full UI
In fact, there are several more rows.
The problem of not using QHBoxLayout inside QGridLayout is that the widgets with the same column number will have the same width.

For example, cell 2, 5, 8 will have the same column width.
If cell 5 contains a QCheckBox, cell 8 contains a QLineEdit and cell 6 contains a QPushButton, then the width of the line edit will be to small.

If I increase the width of the line edit, the button in cell 6 will be too far apart from the checkbox

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9

The combobox is too far apart from the checkbox

!http://i.imgur.com/Gnq6O.png(layout2)!

Eddy

I have to tell first that when designing forms I prefer to use Qt Designer.
There you can place widgets as you like and they can span several colums in the grid.

The gridlayout will take care of this automatically. you really don't need to use horzontal layouts in it.
Just make some extra space where you need it.

EDIT : I didn't see your image first.
You have 5 columns and 4 rows in that case. The same principles can be used here.

Byron Lai

Thanks Eddy, that works for me!
I am just wondering why my first approach causes alignment problem
Is that a bug?

Eddy

I tested your first code on windows 7 and didn't see the behaviour you have.

Layout margins use the theme defaults. But i cannot test it on mac. The only thing i could think of is the contentsmargins of your gridlayout.

Anyway, i'm glad i could help.