...
The classes "xs-lower-<column number>-col" can be applied on blocks and it will automatically change to the specified number of columns for any existing Form Container field. ( the general helper CSS classes)
Example 14. Simple one size selector with panel-w
| 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 25. 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 24, we wrote base styling for all the form containers that have 3 or 4 columns to be repositioned on 2 columns when panel is container size "md".
...