Layouts

 

Documentation home

 

Introduction. 1

Layout Properties 1

Overriding Layout Properties Locally. 1

Liquid Layouts using % widths 2

 

See also: Introduction to Styling, Containers, Styling Assistants, Controls

 

Introduction

A layout defines how child controls of a container control are laid out relative to each other. Each container control has a Layout type property which defines which layout is applied. Once a layout type is set, the Layout properties property can be used to access the layout’s Styling Assistant to further configure the layout e.g. to set horizontal and vertical alignment, gaps between controls etc. The available layouts are:

 

 

Layout Properties

When the Layout type property for a container has been set, clicking on the Layout properties property gives access to the Styling Assistant for that layout. Click on the links above to see the layout properties for each layout type.

 

Overriding Layout Properties Locally

In general, layout properties are properties of the container and are applied by the container. However, in some cases, these properties can be overridden by individual child controls. This is done by clicking the Override layout property for a child control – this appears in the Parent Layout section of the child control’s properties. In the following example, a Panel Control’s center horizontal alignment is overridden to left for a hyperlink.

 

 

 

Liquid Layouts using % widths

When not using bootstrap styling, 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.