A Form contains form fields that can be cosidered considered container fields and/or normal data fields.
...
responsiveBehaviour - string value for applying the class, used for setting up the responsive panel size behaviourbased helper classes.
There are several helper clasess classes for resposive responsive behaviour that someone could use by applying them on the Container Field level:
...
Displayed Column Number | Design Column Number | Responsive Panel Sizes | ||||
|---|---|---|---|---|---|---|
xxs ( < 480px ) | xs ( < 768px ) | sm ( < 992px ) | md ( < 1200px ) | lg ( >= 1200)
| ||
| 1 | 2 - 12 | .xs-lower-one-col | .xs-lower-one-col | |||
| 2 | 3 - 12 | .xs-lower-two-col | .xs-lower-two-col | |||
| 3 | 4 - 12 | .xs-lower-three-col | .xs-lower-three-col | |||
The predefined classes "xs-lower-one-col", xs"xs-lower-two-col", xs"xs-lower-three-col" when applied to block level containers will change the grid-column-template to the given number.In the table above you can see the panel sizes starting from "xxs", up to "lg".
For example "xs-lower-two-col" class applied on a 4 column block, will change that block to 2 columns layout starting at "xs" size, so both "xs" and "xxs" sizes will change the block to a 2 column layout.
...
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="xs"],
.dhx_cell_layout[akcontainersize="xss"] { // xs and xxs
// helper class for responsive forms
.dhxform_obj_material {
.xs-lower-one-col > fieldset {
> .dhxform_base_nested > .f-2-col {
grid-template-columns: 1fr;
> .col1, > .col2 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
}
}
}
}
} |
...
Styling should be applied considering the generics. A Panel could contain another panel so you should be more specific in levels when applying new styles.
...
Notice in Example 4, we wrote the base styling for all the form containers that have 3 or 4 columns to be , so that it gets repositioned on 2 columns when panel size is container size "md".
In the first example, the selector is not taking into account the levels(">"), so it would look inside any nested panels. This selector would be wrong:
...
Example 6 - Example helper class implementation for "xs-lower-one-col". Can be used as reference for a new helper class.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
@include panel-w(('xs', 'xxs')) { // xs and xxs
// helper classes for responsive forms
.dhxform_obj_material {
.xs-lower-one-col > fieldset {
> .dhxform_base_nested > .f-2-col,
> .dhxform_base_nested > .f-3-col,
> .dhxform_base_nested > .f-4-col,
> .dhxform_base_nested > .f-5-col,
> .dhxform_base_nested > .f-6-col,
> .dhxform_base_nested > .f-7-col,
> .dhxform_base_nested > .f-8-col,
> .dhxform_base_nested > .f-9-col,
> .dhxform_base_nested > .f-10-col,
> .dhxform_base_nested > .f-11-col,
> .dhxform_base_nested > .f-12-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4, > .col5, > .col6,
> .col7, > .col8, > .col9, > .col10, > .col11, > .col12 {
@include grid-column(1);
}
}
}
.block_dhxform_item_label_left.xs-lower-one-col {
> .dhxform_block > .in_block > .f-2-col,
> .dhxform_block > .in_block > .f-3-col,
> .dhxform_block > .in_block > .f-4-col,
> .dhxform_block > .in_block > .f-5-col,
> .dhxform_block > .in_block > .f-6-col,
> .dhxform_block > .in_block > .f-7-col,
> .dhxform_block > .in_block > .f-8-col,
> .dhxform_block > .in_block > .f-9-col,
> .dhxform_block > .in_block > .f-10-col,
> .dhxform_block > .in_block > .f-11-col,
> .dhxform_block > .in_block > .f-12-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4,
> .col5, > .col6, > .col7, > .col8,
> .col9, > .col10, > .col11, > .col12 {
@include grid-column(1);
}
}
}
}
}
|
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
- grid column of 2,3 or 4 will be changed to 1 column on xxs panel size
- grid with 2 columns will be changed to 1 column on xs
- fieldsets with 2 columns containing blocks will be changed to 1 column on xs and xss panel size
- blocks with 4 columns will be changed to 2 columns on xxs, xs and sm panel sizes
- fieldsets with 6 or 5 columns will be changed to 2 columns on xxs, xs and sm panel sizes
- forms with 3 or 4 columns will be changed to 2 columns on xs and sm panel sizes