Usually, CSS is a sufficient and convenient way to indicate how to layout widgets within a container widget, and we recommend to get familiarized with CSS for basic layout and styling.
Wt provides the typical box, grid or border layout management options and layout managers and CSS can safely be intermixed.
In a horizontal box layout, widgets are given an appropriate width based on available space in the container and layout rules, while all widgets get the same height. Similarly, in a vertical box layout, widgets are given appropriate heights based on available space in the container and layout rules, while all widgets get the same width.
In the example below, a
WHBoxLayout with default
padding (9 pixels) and spacing (6 pixels) is used to manage two
child widgets. If no stretch factors have been specified, space
is evenly distributed to all widgets.
By giving Item 1 a non-zero stretch factor value of 1, Item 2 will only use its preferred width, and Item 1 consumes all excess space, as illustrated below.
The preferred width of a widget is either based on its contents
(which for text is the in some cases impractical assumption of
putting all text on a single line), but can be further
widget->setWidth() or CSS
WVBoxLayout works in exactly the same way, but
stacks children vertically.
Layout managers may be arbitrarily nested, either directly, or indirectly through widget composition, to create complex layouts. Layout managers fully cooperate with CSS, honoring the CSS margins and paddings of children, but also those of intermediate widgets in complex layouts.
In the example below we nest a
two items in a
WVBoxLayout containing one other item.
This layout manager organizes the contents of a
in a grid.
stretch factor defined for rows or columns is used to distribute
excess space. In the example below, row 1 and columns 1 and 2
are given a non-zero stretch factor.
This is a layout manager that organizes the container space in up to 5 regions, with a central region consuming any excess space.
Any of the regions can be omitted.