Common Layout Mistakes
Common mistake 1. Setting relative size for a component within a container with content-based size

Example of incorrect layout with relative size:

screen layout rules 17

In this example, a label has 100% height, while the default height for VBox is AUTO, i.e. content-based.

Example of incorrect layout with expand:

screen layout rules 18

Expand implicitly sets relative 100% height for the label, which is not correct, just like in the example above. In such cases, the screen may not look as expected. Some components may disappear or have zero size. If you encounter any layout problems, check that relative sizes are specified correctly first of all.

Common mistake 2. Components inside a ScrollBox have 100% dimensions

Example of incorrect layout:

screen layout rules 19

As a result of such mistake, scroll bars in ScrollBox will not appear even if the size of nested components exceeds the scrolling area.

screen layout rules 20
Common mistake 3. Aligning components with insufficient space

Example of incorrect layout:

screen layout rules 21

In this example, HBox has content-dependent size, therefore the label alignment has no effect.

screen layout rules 22