...
xxs ( <480px ) | xs ( <768px ) | sm ( <992 ) | md ( <1200 ) | lg ( >=1200 ) |
|---|---|---|---|---|
| .xs-two-col | .xs-two-col | |||
| .xs-three-col | .xs-three-col | |||
The classes "xs-<column number>-col" can be applied on blocks and it will automatically change to the specified columns(column number placeholder) for any existing Form Container field.
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.
For example:
Don't do:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="md"]{ // md size,
.dhxform_obj_material > .dhxform_base.f-3-col,
.dhxform_obj_material > .dhxform_base.f-4-col {
}
} |
Do:
| 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;
}
}
} |
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
...