Simple Layout

This section of the guide covers the Simple (CSS Position) layout manager

Overview

When creating a form, one must always select a layout type. Simple (CSS Position) is the easiest and most common way to arrange components on a form. It is the recommended approach for most projects.

Quick Start

When creating a form, leave the default option for Simple (CSS Position) layout on the New Form Wizard. Drag components onto the form, or set the cssPosition property. See examples below.

How it works

Simple or CSS Position layout is the default layout type for building forms. It controls the location and dimensions of the components on the form and the dynamic behavior of the components as the form size changes.

Just to clarify, one does not need to know anything about CSS technology to use this layout type. The mechanism for laying out components is straightforward and can be learned in a few minutes.

CSS Position

When using CSS Position, you will specify the cssPosition property of every component that you place on the form. The position property contains six values to control location and behavior. They are expressed as a single string having the form: top, right, bottom, left, min-width, min-height. Each value can be expressed as an absolute pixel value or a relative percentage value. The property can also be set a calculated (pixel & percentage) value.

Property	Description
Top	The top edge of the component, expressed as a distance from the top of the form.
Right	The right edge of the component, expressed as a distance from the right of the form.
Bottom	The bottom edge of the component, expressed as a distance from the bottom of the form.
Left	The left edge of the component, expressed as a distance from the left of the form.
Min-Width	The width of the component
Min-Height	The height of the component

Pixel Values

You can use pixel values to dictate the exact location or dimension. This means that the value will not change, regardless of the form's changing size.

// Example 10 pixels from top of form
top: 10     

Percentage values

You can use percentage values to specify the relative location or dimension. This means that the value will change, depending on the form's changing size.

// example 10% of the form's height from top of form
top: 10%

Calculated Values

You can combine percentages and pixel values to specify a calculated location or dimension. This is ideal for adding absolute gaps between relatively positioned components.

// example 50% of the form's height from top, plus additional 10 pixels
top: calc(50% + 10px)

Ignored Values

You can also choose to ignore a property. To do this, enter a value of -1 to skip the property. Doing so will allow another property to have precedence. For example, suppose that you wanted to have a component placed 10 pixels from the left edge and always occupy 25% width of the form. In this case, you may choose to ignore one of the right location property.

// 10 px from left, 25% width
left: 10
right: -1
width: 25%

Conflicts: Sometimes position values can be in conflict. In this case there is an order of precedence. Location values will always override their corresponding dimension values. For example, a component having both values for left and right will take precedence and the width value will be ignored (except to enforce the minimum)

Dragging Components

When editing a Simple layout form, you can also drag to move and resize components inside the Form Editor. This will update the cssPosition property.

Examples

Below are a few examples of simple layout arrangements. Try them out on your own components.

Fully-Anchored, ignore dimensions In this example, This component will always be 10 pixels from each edge of the form. It will grow and shrink with a changing form size, but it will never move. (width and height are ignored)

cssPosition: 10,10,10,10,-1,-1

Anchored top-left, fixed dimensions In this example, the component will maintain a fixed position on its top-left corner and it will maintain a fixed size. It will not grow, shrink or move.

cssPosition: 10,-1,-1,10,400,200

Anchored top, bottom & left, relative width In this example, the component is anchored to the left and it will grow and shrink vertically. It will also grow and shrink horizontally, relative to the width of the form. (height is ignored)

cssPosition: 10,-1,10,10,50%,-1

Anchored top, bottom & left, calculated right This example shows two components which occupy two columns and leave a 10px gap. Their respective right and left values use a calculated value (50% of the form width, plus an extra 10px). This is ideal to create a gap between components

cssPosition: 10,calc(50% + 10px),10,10,-1,-1
cssPosition: 10,10,10,calc(50% + 10px),-1,-1