STRETCH attribute
The STRETCH
attribute defines if the form element can grow or has a
fixed size.
Syntax
STRETCH[
@screen-size]
= {
NONE |
X |
Y |
BOTH }
{
SMALL |
MEDIUM |
LARGE }
- 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. - Values
NONE
,X
,Y
andBOTH
apply to form items that can stretch horizontally and vertically such asTEXTEDIT
,IMAGE
,WEBCOMPONENT
. - Values
NONE
,X
apply to form items that can only stretch horizontally such asBUTTON
,EDIT
,COMBOBOX
, as well as to theLAYOUT
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.
Example
IMAGE i01 = FORMONLY.picture, STRETCH=BOTH;
EDIT f01 = customer.cust_name, STRETCH@LARGE=X, STRETCH@MEDIUM=NONE;