A Form contains form fields, that can be container fields and/or normal data fields.
A normal DataField is an input, checkbox, dynselect, richtext, htmlcontent and so on.
Form Containers are blocks, fieldsets and the actual form control.
At the form DataField Level, each form DataField has attributes for specifying the correct ROW, COLUMN, WIDTH and HEIGHT.
ROW - integer value representing the starting row grid line in a CSS Grid Layout
COLUMN - integer value representing the starting column grid line in a CSS Grid Layout
WIDTH - integer value representing the number of lines to move in Grid Layout to the end of the column ( GRID-COLUMN-END = ROW + WIDTH )
HEIGHT - integer value representing the number of lines to move in Grid Layout to the end of the row ( GRID-ROW-END = ROW + HEIGHT )
At the form Container level, each form control: Besides the attributes mentioned above ROW, COLUMN, Width, Height, the Form, Block and Fieldset have the following extra attributes:
COLUMNS - integer representing the Grid column Template, the number of columns for
responsiveBehaviour - string value for applying the classes, used generally for responsive behaviour classes. examples: "xs-two-col" or "xs-three-col"
Responsive UI Styling
Each panel will have "akContainerSize" DOM attribute applied on the panel level. This will be updated everytime on a panel resize.
The attribute can be used by frontend developers to write custom styling, based on the size of the panel in which the form resides.
Responsive behaviour sizes from "akContainerSize" and the existing helper classes:
xxs ( <480px ) | xs ( <768px ) | sm ( <992 ) | md ( <1200 ) | lg ( >=1200 ) |
---|---|---|---|---|
.xs-two-col | .xs-two-col | |||
.xs-three-col | .xs-three-col | |||
Default styling applied on all the forms: