There are different techniques and technologies available to
determine the size (width and height) of a rendered widget.
The browser uses CSS (Cascading Style Sheets) as a
technology for defining visual aspects, such as fonts, colors,
border styles, but also for geometry.
Whereas CSS (and browsers) were originally designed for
the markup of documents, the requirements for web applications
are in many ways different. Layout Managers are a
common technique in desktop applications to layout a UI, and
this is also available in Wt.
A practical alternative to plain CSS, and to overcome some
of its deficiencies which, are CSS frameworks which allow one
to place widgets using a generic tag system. These typically
divide the page in a virtual grid. When using Wt with the Bootstrap
theme, such a CSS grid framework is included.
Introduction to CSS
Cascading Style Sheets (CSS) group rules that specify both
markup and layout properties of widgets. These rules are linked
to certain widgets (or more correctly, DOM nodes in the browser
that render these widgets) using selectors. Selectors may match
widgets based on the style class or widget id of the widget or
one of its ancestors, or even more advanced combinations.
Primer + reference here.
Three ways to use CSS in Wt.
A single widget's style properties can be modified directly using
The internal stylesheet allows to use a C++ API to create,
modify and remove CSS style rules that typically impact
By far the most practical approach is to use external CSS
stylesheets that define styling rules, and apply them to Wt widgets
using style classes.
API for inline CSS style
A subset of CSS properties are available in the Wt API, and thus
allow to influence the layout or visual appearance of a widget
directly, from C++. This is useful if you want programmatic
control over these properties; for other situations we recommend
to use a n external CSS stylesheet.
CSS properties that impact layout aspects are made available directly
in the WWidget API, whereas decorative aspects are available
from WWidget::cssDecorationStyle(), which returns a reference
to a WCssDecorationStyle class.
The following table gives an overview of properties that can be
directly modified from C++.
The method WApplication::styleSheet() returns a
reference to the embedded stylesheet (an instance of
WCssStyleSheet), which can be manipulated dynamically
to add, modify or removing rules. This is used primarily in some
advanced composite widgets within Wt (such as WTableView,
since it allows to modify certain properties of a group of
widgets using a minimum of DOM manipulations.
Using External Style Sheets
Widgets may allow configuration of their look and feel through style
classes. These may be defined in an embedded stylesheet or in external
style sheets. Preferably use external stylesheets because of the strict
separation between style and widget. It provides the broadest application
of style as it allows you to manage the presentational aspects of all
widgets from a handful of style sheets.
These are API classes and methods for working with CSS external