STRETCH attribute

Syntax

STRETCH[@screen-size] = { NONE | X | Y | BOTH }

{ SMALL | MEDIUM | LARGE }

1. screen-size is a screen size selector that indicates when the stretch attribute must apply, depending on the size of the screen. Several STRETCH@screen-size attributes can be used for the same element.
2. Values NONE, X, Y and BOTH apply to form items that can stretch horizontally and vertically such as TEXTEDIT, IMAGE, WEBCOMPONENT.
3. Values NONE, X apply to form items that can only stretch horizontally such as BUTTON, EDIT, COMBOBOX, as well as to the LAYOUT section.

Usage

The STRETCH attribute specifies if the size of the form element is fixed, or depends on the width or height of the window. The remaining space in the window is distributed among the form elements that can stretch.

STRETCH options description:

• STRETCH=NONE: Element cannot resize in any direction.
• STRETCH=Y: Element can resize vertically only.
• STRETCH=X: Element can resize horizontally only.
• STRETCH=BOTH: Element can resize vertically and horizontally.

In a GRID container where grid-based aligment rules take precedence over size and proportions, the STRETCH attribute set on a given item applies to the entire grid-column (for STRETCH=X/BOTH) or to the entire grid-row (for STRETCH=Y/BOTH), meaning that all elements that belong to the same grid column or row will stretch accordingly.

STRETCH=X is typically used on GRID elements to achieve responsive layout.

Fields that can stretch horizontally should also use the SCROLL attribute.

For elements inside GRID/SCROLLGRID containers, STRETCH=X attribute can be combined with the STRETCHMIN attribute, to define a minimum width for the stretchable element.

For TABLE/TREE columns, the STRETCH=X attribute can be combined with STRETCHMIN and STRETCHMAX attributes, to define a minimum and maximum width for the stretchable element. The STRETCHCOLUMNS attribute can be used at the TABLE/TREE item definition to make all columns stretchable.

STRETCH can be set on the LAYOUT element, to specify a default stretch behaviour for all children elements of the form. This default behaviour can be overridden by a local definition of STRETCH on a form item. For the LAYOUT node, the default is STRETCH=X for mobile devices and STRETCH=NONE for desktop front-ends.

By default, resizable form items like IMAGE, TEXTEDIT have a fixed width and height. Use the STRETCH attribute to allow the widget to resize vertically, horizontally, or in both directions.

By default, WEBCOMPONENT form items stretch in both directions (STRETCH=BOTH is the default).

To create a responsive layout form, the STRETCH attribute can be combined with the @screen-size selector, to get different stretch behaviors depending on the screen size.