...
| 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.
The classes with format "col<column number>" are used to define the grid column start position.
When you have a special use-case where you do not want to keep the styling as default for all the forms you need to use responsiveBehaviour attribute to apply a class on that particular form field.
This will let you style the respective form control individually without changing the responsive behaviour of the other forms.
Another example using the "xs-two-col" helper class, which can be used for changing the columns template and positioning of cells inside blocks with multiple columns defined initially.
| Code Block |
|---|
.block_dhxform_item_label_left.xs-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 {
grid-column-start: 2 !important;
grid-column-end: 3 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
}
> .col1, > .col3, > .col5, > .col7, > .col9 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
}
}
}
|
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
...