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.
There are however several situations when CSS is not effective
to create a layout, especially for complex web applications. In
particular, when placing contents within a dialog it is often
necessary to adjust its contents to available vertical space,
and it is often desirable to distribute excess space to a
particular widget while keeping other widgets to their preferred
size. It is for these reasons that Wt has a comprehensive set of
management to children of a WContainerWidget.
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
controlled using widget->setWidth() or CSS
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.