Flow Layout
See also: Containers, Layouts, Introduction to Styling, Styling Assistants, Controls
A Flow Layout is similar to having no layout in that child controls are written horizontally across the page and will flow onto a new line when there is insufficient remaining width. Note that the point at which output flows onto the next line is dependent on the browser window width and is therefore sensitive to screen dimensions and window re-sizing by the user.
Compared to no layout, Flow Layout offers the following features:
Many controls (e.g. Titled Panel, Grid, Table) are block controls meaning that the HTML/XHTML generated are block elements and will normally start on a new line in the browser. When placed inside a Flow Layout however, these block controls will be positioned within the normal flow i.e. they will only start on a new line when the browser window is not wide enough to accommodate them. This is illustrated below with a Table Control between two texts:
Layout properties are accessed by clicking the Layout properties property of any container control that has a layout type set to Flow.
Qualifier: layoutProperties.FLOW
Property |
Description |
Name1 |
Type1 |
Get1 |
Set1 |
Get/Set Values1 |
Gap Between Controls |
Sets the horizontal spacing between adjacent controls. |
spacerSize |
Character |
Yes |
Yes |
As CSS font-size property |
Vertical Alignment |
Sets vertical alignment for all child content. |
verticalAlignment |
Character |
Yes |
Yes |
Click here for values. Value Fill is not supported. |
1 See accessing control properties from scripts
Examples of setting properties via API based language:
controls.PANEL1.layout.spacerSize
= "20px";
controls.PANEL1.layout.verticalAlignment
= "Top";
Examples of setting properties via FPL:
set PANEL1.layoutProperties.FLOW.spacerSize
= '20px';
set
PANEL1.layoutProperties.FLOW.verticalAlignment = 'Top';