...
A normal DataField is an input, checkbox, dynselect, richtext, htmlcontent, button and so on.
Form Containers are include blocks, fieldsets and the actual form control.
...
COLUMN - integer value representing the starting column grid line in a CSS Grid Layout
WIDTH Width - integer value representing the number of lines to move in Grid Layout to the end of the column ( GRID-COLUMN-END = ROW + WIDTH )
HEIGHTHeight - integer value representing the number of lines to move in Grid Layout to the end of the row ( GRID-ROW-END = ROW + HEIGHT )
...
Each panel will have "akContainerSize" DOM attribute applied on the panel level. This will be updated everytime on whenever a panel resize is performed by the user.
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:
...
| Col No. | xxs ( < 480px ) | xs ( < 768px ) | sm ( < 992px ) | md ( < 1200px ) | lg ( >=1200 ) |
|---|---|---|---|---|---|
| 1 | |||||
| 2 | .xs-lower-two-col | .xs-lower-two-col | |||
| 3 | .xs-lower-three-col | .xs-lower-three-col | |||
| 4 |
Mixins:
For setting up the correct column styling use the mixins: grid-column($index) and max-panel-w($sizes).
Styling should be applied considering the generics. A Panel could contain another panel so you should be more specific in levels when applying new stylings.The classes "xs-<column number>-col" can be applied on blocks and it will automatically change to the specified columns(column number placeholder) for any existing Form Container field.
For example:
Don't do:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="md"]@include max-panel-w('md') { // md size, .dhxform_obj_material > .dhxform_base.f-3-col, .dhxform_obj_material > .dhxform_base.f-4-col { } } |
Do:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="sm"]@include max-panel-w('md') { // xs and sm > .dhxform_obj_material > .dhxform_base.f-3-col, > .dhxform_obj_material > .dhxform_base.f-4-col { grid-template-columns: repeat(2, 1fr); > .col1, > .col3 { @include grid-column-start: 1 !important(1); grid-column-end: 2 !important; grid-row-start: auto !important; grid-row-end: auto !important; } > .col2, > .col4 { @include grid-column-start: 2 !important; grid-column-end: 3 !important; grid-row-start: auto !important(2); grid-row-end: auto !important; } } } |
Notice in this example, we wrote base styling for all the form containers that have 3 or 4 columns to be repositioned on 2 columns when panel is containersize sm.
...
When you have a special use-case where you do not want to keep the responsive styling as default for all the forms with the same structure, you need to use responsiveBehaviour attribute to apply a class on that particular form field.
...
| Code Block |
|---|
.block_dhxform_item_label_left.xs-lower-two-col { > .dhxform_block > .in_block > .f-4-col, > .dhxform_block > .in_block > .f-6-col, > .dhxform_block > .in_block > .f-8-col, > .dhxform_block > .in_block > .f-10-col { grid-template-columns: 2fr; > .col2, > .col4, > .col6, > .col8, > .col10 { @include grid-column-start: 2 !important; (2); grid-column-end: 3 !important; grid-row-start: auto !important; grid-row-end: auto !important; } > .col1, > .col3, > .col5, > .col7, > .col9 { @include grid-column-start: 1 !important; grid-column-end: 2 !important; grid-row-start: auto !important; grid-row-end: auto !important(1); } } } |
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
...