...
Form Containers are made of blocks, fieldsets and the root form control.
At the form DataField Level, each form DataField has attributes for specifying the correct ROW, COLUMN, WIDTH and HEIGHT.
...
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:
...
"xs-lower-one-col", "xs-lower-two-col" or "xs-lower-three-col"
Responsive UI Styling
Each panel will have the "akContainerSize" DOM attribute applied on the panel level with the predefined sizes(see table below).
...
The DOM attribute is useful for writing custom responsive styling, based on the size of the panel.
Responsive panel sizes from "akContainerSize" and the existing helper classes:
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-lower-two-col", "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".
...
| 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.
...
| Code Block |
|---|
@include panel-w('md') { // md size,
.dhxform_obj_material > .dhxform_base.f-3-col,
.dhxform_obj_material > .dhxform_base.f-4-col {
}
} |
Example 5. Multiple sizes selector with panel-w mixin and grid-column mixin usage:
| Code Block |
|---|
@include panel-w(('sm','xs')) { // 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(1);
}
> .col2, > .col4 {
@include grid-column(2);
}
}
} |
Notice in Example 4, we wrote the base styling for all the form containers that have 3 or 4 columns, so that it gets repositioned on 2 columns when panel size is "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:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="sm"] .dhxform_obj_material > .dhxform_base.f-4-col |
...
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="sm"] > .dhxform_obj_material > .dhxform_base.f-4-col |
...
The classes with format "f-<column number>-col" are used to apply the grid-column-templates styling.
The classes with format "col<column number>" are used to define the grid column position and is used to change column position when applying the responsive behaviour using SASS.
When you have a special use-case where you do not want to keep the responsive styling as default for all the forms in the application, you need to use responsiveBehaviour attribute to apply a class on that particular form field.
This will let you style only that form or a smaller group of forms..
Another example using the "xs-lower-two-col" helper class, defined in the responsiveBehaviour attribute, which can be used for changing the columns template and positioning of the columns from inside blocks on smaller panel sizes.
| 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(2);
}
> .col1, > .col3, > .col5, > .col7, > .col9 {
@include grid-column(1);
}
}
}
|
...
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:
...