Form Layout and Vertical Layout combo doesn't work as expected

[t.vanbesien]

Hi everyone,

I'm new to Qt and I'm very confused with the behavior of layout and form layout.
First off what is displayed in the Design tab of Qt Creator is not the same as what is displayed when I execute the program.


I found online that the problem was the fact that on MacOs there a special GUI policy:
https://stackoverflow.com/questions/56176361/qt-on-mac-form-layout-fails-to-stretch-horizontally
But the solution suggested doesn't work, nothing changes when I do it.
Also why doesn't the two line edit expand horizontally? Why is the preview in the editor not the same as what is actually displayed when the program is launched?
Here is a picture of my Objects hierarchy:

I did try playing around with the formLayout properties layoutLabelAlignment and layoutFormAlignment but it doesn't produce the result I want, wich is that the labels and input boxes should be aligned and stretch horizontally to fill the layout they are contained in.

Help please :)

[mpergand]

Hi,

You need to set a layout to "centralwidget" for inner widgets to expand.

[t.vanbesien]

Yup, it works like this thanks.

[t.vanbesien]

For people who might have the same problem here what I did wrong and how I corrected it:

If you use a form layout you don't need to use horizontal layout inside it.
Layout will fill the widget they are contained in, keep this in mind if you wonder why it doesn't properly center.

[SimonSchroeder]

I am not sure if you really have figured out how to do it properly (even though your approach might work). As you can see from your screenshot centralwidget and widget_login don't have a layout (the little icon next to their name). Instead of having a verticalLayout inside the widget_login, widget_login should have a layout directly. This can be done by right-clicking on the widget.

The same goes for centralwidget. However, there is no good reason to just put a single QWidget inside another QWidget. You should have all items within centralwidget directly and then drop widget_login (you can even rename centralwidget to widget_login if you want to). If you use nested widgets like this (with proper layouts), by default the content margins of the layouts will add up and you need to set them to 0 so that it looks proper again. So, it is better to not use nested widgets in the first place.

[t.vanbesien]

@SimonSchroeder
Yes, I did figure it out eventually! But thanks for putting a clear explanation for anyone who might stumble on this post :) At first I wanted to nest the widgets so that I could hide them and display another widget to make multiple pages. But I figured out I have to use stackedWidget to make multiple pages properly.

[Neeraj123]

@t-vanbesien said in Form Layout and Vertical Layout combo doesn't work as expected:

I'm new to Qt and perplexed with layout and form layout behavior.
First off what is displayed in the Design tab of Qt Creator is not the same as when I execute the program.

One possible reason for this discrepancy is that the size and position of the widgets in your layout may change when you run the program based on factors such as the size of the window, the size of the screen, or the user's preferences.

Another reason for the discrepancy could be that the Design tab may not accurately reflect the layout rules specified in your code. For example, suppose you've set minimum or maximum sizes for your widgets, or you've set some widgets to stretch or expand to fill available space. In that case, the Design tab may not show the exact positioning of widgets and their size as it may be affected by these rules.

Layout and Form layout are used to organize and position widgets in your application's user interface. The main difference between the two is that a Layout can be applied to any QWidget-based object, while a Form layout is specific to the QWidget-based forms created by Qt Designer.

Layouts automatically arrange widgets based on predefined rules, such as horizontal or vertical alignment or grid layout. With layouts, you don't have to manually set the position and size of each widget, which makes it easier to create and maintain your user interface.

On the other hand, form layout is a specific type of layout used to organize widgets in a dialog box or other form. Form layout allows you to align and position widgets in rows and columns, making creating professional-looking forms with a consistent layout easy.

the Design tab is a preview of what your user interface will look like, but it may not accurately represent the final result due to factors such as user preferences or layout rules. Layouts and Form layouts are valuable tools for organizing and positioning widgets in your application, with Form layouts being specific to creating forms.