...
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 number of columns (column number placeholder) for any existing Form Container field.
...
Don't do:
| Code Block |
|---|
@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 |
|---|
@include max-panel-w(('md','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); } } } |
...
| 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 start position and to be able to change column position when applying the responsive behaviour using CSS.
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.
...