Usually, CSS is a sufficient and convenient way to indicate how to layout widgets within a container widget, and we recommend to get accustomed 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 inpractical assumption of putting all text on a single line), but can be further controlled using widget->setWidth() or CSS width settings.
The 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 WHBoxLayout containing two items in a WVBoxLayout containing one other item.
This layout manager organizes the contents of a WContainerWidget in a grid.
Like WBoxLayout, a 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.