...
For setting up the correct column styling use the provided mixins: grid-column($index) and panel-w($sizes).
Example 1 (Mixins)- Grid column mixin example:
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 2 (Mixins)2 - Usage of panel-w and grid-column mixin:
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);
}
}
}
}
|
...
| 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):3 - Usage of panel-w with multiple breakpoints and grid-column mixin
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);
}
}
}
}
} |
...
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 4. 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 5. Multiple sizes selector with panel-w mixin and grid-column mixin usage:
...
| Code Block |
|---|
.block_dhxform_item_label_left.xs-lower-two-col {
> .dhxform_block > .in_block > .f-4-col,
> .dhxform_block > .in_block > .f-6-col,
> .dhxform_block > .in_block > .f-8-col,
> .dhxform_block > .in_block > .f-10-col {
grid-template-columns: 2fr;
> .col2, > .col4, > .col6, > .col8, > .col10 {
@include grid-column(2);
}
> .col1, > .col3, > .col5, > .col7, > .col9 {
@include grid-column(1);
}
}
}
|
Example 6 - Example helper class implementation for xs-lower-one-col. Can be used as example for a new helper class.
| Code Block | ||
|---|---|---|
| ||
// RESPONSIVE STYLES FOR Responsive UI Forms
// SIZES: xs, xxs
@include panel-w(('xs', 'xxs')) { // xs and xxs
// helper classes 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);
}
}
}
.block_dhxform_item_label_left.xs-lower-one-col {
> .dhxform_block > .in_block > .f-2-col {
grid-template-columns: 1fr;
> .col1, > .col2 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-3-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-4-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-5-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4, > .col5 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-6-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
}
}
}
}
|
Default styling applied on all the forms. The styling is part of SWAT-WEBUI by default and could be enhanced in the future:
...