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.

Form (min)sizes in the browser

A form has in its properties 4 values that are used to set or not set the minimum sizes (min-width and min-height) of the form when showing in a container (like tabpanel).

First the form has "minWidth" and "minHeight" properties that should be set, those are also the design size what you see in the Form Editor in the developer.

Those 2 properties are set at runtime also on the form based on the other 2 properties: useMinHeight and useMinWidth, those 2 properties can have 3 states: true,false and not_set When it is true the min-width/height is set in the browser that could result in a tabpanel showing scrollbars because it tries to fit the form for that minimum size. If it is false then the min-xxx are not set, and the form size is as big as the viewport (the visible area). If the form has some components outside this viewport, the form will overflow and scrollbars will appear. The scrolling area will be exactly as big so it can fit exactly all the components.

The difference between true and false is that the size of the form is bigger when true because it has also marging to the right and bottom when you have designed marging there around the button that is placed in the bottom right corner. But also if you have button that is right, bottom alligned, see CSS Postion below, then the button is alligned to the min size of the form instead of the viewport that you see, but the button will still move down or to the right if it has more space.

|If the value is not_set then it will fallback to a default, the standard default value is 'true', but this can be overwritten by setting a client property for 1 of both sizes:

application.putClientProperty(UICONSTANTS.DEFAULT_FORM_USE_MIN_HEIGHT,false);

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