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.
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.
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.
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.
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)
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.
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)
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
Last updated