ResponsiveGridLayout

Introduction

The ResponsiveGridLayout can be attached to the Form Control in order to arrange the Elements in a responsive way (see Grid). The size and arrangement of the single elements depends on the size of the screen. The Form Control consists of a Form on top level which contains several FormContainers with several FormElements in it. According to our layout concept all of these can have LayoutData attached to them.

You can use GridData on FormContainers and the content controls like in the Grid control. So it is possible to influence the linebreaks and size (spans) of the single elements. On FormElements GridData is not supported. To influence the rendering of the Labels and fields GridData must be set for these controls. If no GridData are used on a FormContainer or Control, the ResponsiveGridLayout tries to calculate the linebreaks and spans. If the provided GridData are very complex, this automatism may not bring the expected result. In this case GridData should be set on all affected controls.

Basic Example

A simple Form with a ResponsiveGridLayout. Change the screen size to see the changes

Example with different default settings

A simple Form with a ResponsiveGridLayout. Change the screen size to see the changes.
Here the default properties labelSpanL, labelSpanM, labelSpanS, emptySpanL, emptySpanM, emptySpanS, columnsL, columnsM, breakpointL and breakpointM are set different. You see the difference on different screen sizes.

API Documentation

API documentation