Description

Each Column Layout has a defined number of columns. Child controls are laid out in a grid formation where each child control is placed in the next available table cell e.g. if the Column Layout has two columns, the first control is displayed in row 1 column 1, the second in row 1 column 2, the third in row2 column1, the fourth in row2 column2 etc.

The following example shows a Column Layout with 3 columns.

Layout Properties

Layout properties are accessed by clicking the Layout properties property of any container control that has a layout type set to Column.

Qualifier: layoutProperties.COLUMN

Property	Description	Name¹	Type¹	Get¹	Set¹	Get/Set Values¹
Number Of Columns	Defines the number of columns in each row.	columns	Integer	Yes	Yes
Cell Properties:
Horizontal Alignment	Sets horizontal alignment for each child control within its table cell. This property is only effective when there is sufficient space to allow horizontal repositioning. This property can be overridden for individual controls using the Override layout property. Options are: Center – center align each child control within its table cell. Fill – will attempt to stretch each control so that it fills the available space. Only certain controls such as buttons and container controls are capable of being stretched in this way, and this setting is ignored for any other controls. For those controls which are capable of being stretched, a value of Fill causes the width setting of any such child controls to be ignored. Left - left align each child control within its table cell. Right – right align each child control within its table cell.	cellHAlign	Character	Yes	Yes	Click here for values.
Vertical Alignment	Sets vertical alignment for each child control within its table cell. This property is only effective when there is sufficient space to allow vertical repositioning. This property can be overridden for individual controls using the Override layout property. Options are: Bottom – bottom align each child control within its table cell Center – center align each child control within its table cell Top – top align each child control within its table cell	cellVAlign	Character	Yes	Yes	Click here for values. Value Fill is not supported.
Padding	The padding to be applied to each table cell. This has the effect of separating each child control from its neighbours. This property can be overridden for individual controls using the Override layout property.	See padding properties
Block Alignment:
Horizontal Alignment	Sets horizontal alignment for all child controls of the container as a whole e.g. setting this property to center will place all controls in the center of the container’s horizontal space. Options are: Center – center align all content as a whole Fill – space all columns to fill the available width Left - left align all content as a whole Right – right align all content as a whole Set this property to Fill to achieve a liquid layout - where widths are specified as percentages based on the current width of the browser window and the page content expands to fill the available width.	hAlign	Character	Yes	Yes	Click here for values.
Vertical Alignment	Sets vertical alignment for all child controls of the container as a whole e.g. setting this property to center will place all controls in the center of the container’s vertical space. This property is only effective when the container is tall enough to accommodate vertical repositioning of its children e.g. the height has been set explicitly using the container’s height property. Options are: Bottom – bottom align all content as a whole Center – center align all content vertically as a whole Fill - space all rows to fill the available height Top – top align all content as a whole	vAlign	Character	Yes	Yes	Click here for values.
Advanced Properties:
Layout table style	See Advanced Properties	tableClass tableStyle	Character	Yes	Yes	As per HTML class parameter As per HTML style parameter
Layout cell style	See Advanced Properties. This property can be overridden for individual controls using the Override layout property.	layoutClass layoutStyle	Character	Yes	Yes	As per HTML class parameter As per HTML style parameter

¹ See accessing control properties from scripts

Examples of setting properties via API based language:

controls.PANEL1.layout.columns = 6;

controls.PANEL1.layout.cellVAlign = "Top";

controls.PANEL1.layout.allPadding = "20px";

controls.PANEL1.layout.tableClass = "myLayoutTableClass";

controls.PANEL1.layout.layoutStyle = "padding-top:5px;padding-bottom:5px;";

Examples of setting properties via FPL:

set PANEL1.layoutProperties.COLUMN.columns = 6;

set PANEL1.layoutProperties.COLUMN.cellVAlign = 'Top';

set PANEL1.layoutProperties.COLUMN.allPadding = '20px';

set PANEL1.layoutProperties.COLUMN.tableClass = 'myLayoutTableClass';

set PANEL1.layoutProperties.COLUMN.layoutStyle = 'padding-top:5px;padding-bottom:5px;';

Advanced Properties

A Column Layout lays out its child controls in a table. The Advanced Properties button allows specification of CSS classes and inline style for the table (<table>) and table cell (<td>) tags.

Hints and Tips

Liquid Layouts using % widths

Click here for an example of using a liquid layout where widths are specified as percentages based on the current width of the browser window and the page content expands to fill the available width. A liquid layout will adjust itself dynamically as the width of the browser adjusts e.g. when the orientation of a tablet or mobile phone is changed.

Horizontal and Vertical Alignment

To set horizontal or vertical alignment, use the cell properties in most cases.

How to remove spacing between controls

To completely remove the gaps between adjacent child controls, set a padding of 0px.