...
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="sm"]{ // 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 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
}
> .col2, > .col4 {
grid-column-start: 2 !important;
grid-column-end: 3 !important;
grid-row-start: auto !important;
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.
In the don't do 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 |
Correct example, that takes only the first child and would not conflict with nested panels:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="sm"] > .dhxform_obj_material > .dhxform_base.f-4-col |
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
...