...
For setting up the correct column styling use the general mixins: grid-column($index) and panel-w($sizes).
Example 1 (Mixins):
SASS:
| Code Block |
|---|
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
|
...
| Code Block |
|---|
> .col1, > .col2, > .col3 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
} |
Example 22 (Mixins):
SASS
| Code Block |
|---|
// RESPONSIVE STYLES FOR Responsive UI Forms
// SIZES: xs
@include panel-w('xs'){
> .dhx_cell_cont_layout > .dhxform_obj_material {
> .f-2-col, > .f-3-col, > .f-4-col{
grid-template-columns: 1fr;
> .col2, > .col4, > .col8{
@include grid-column(1);
}
}
}
}
|
Would generate the CSS:
| Code Block |
|---|
// RESPONSIVE STYLES FOR Responsive UI Forms // SIZES: xs .dhx_cell_layout[akcontainersize="xs"] { > .dhx_cell_cont_layout > .dhxform_obj_material { > .f-2-col, > .f-3-col, > .f-4-col{ grid-template-columns: 1fr; > .col2, > .col4, > .col8{ grid-column-start: 1 !important; grid-column-end: 2 !important; grid-row-start: auto !important; grid-row-end: auto !important; } } } } |
Example 3 (Mixins):
SASS:
| Code Block |
|---|
@include panel-w(('xs', 'xxs')) { // xs and xxs // helper class for responsive forms .dhxform_obj_material { .xs-lower-one-col > fieldset { > .dhxform_base_nested > .f-2-col { grid-template-columns: 1fr; > .col1, > .col2 { @include grid-column(1); } } } } } |
Would generate the CSS:
| Code Block |
|---|
.dhx_cell_layout[akcontainersize="xs"], .dhx_cell_layout[akcontainersize="xss"] { // xs and xxs // helper class for responsive forms .dhxform_obj_material { .xs-lower-one-col > fieldset { > .dhxform_base_nested > .f-2-col { grid-template-columns: 1fr; > .col1, > .col2 { grid-column-start: 1 !important; grid-column-end: 2 !important; grid-row-start: auto !important; grid-row-end: auto !important; } } } } } |
Styling should be applied considering the generics. A Panel could contain another panel so you should be more specific in levels when applying new styles.
...