Page History

A Form contains form fields , that can be considered container fields and/or normal data fields.

A normal DataField is an input, checkbox, dynselect, richtext, htmlcontent, button and so on. 

Form Containers include are made of blocks, fieldsets and the actual root form control. 

At the form DataField Level, each form DataField has attributes for specifying the correct ROW, COLUMN, WIDTH and HEIGHT.

ROW - integer value representing the starting row grid line in a CSS Grid Layout (Calculated attribute on save in Form Designer)

COLUMN - integer value representing the starting column grid line in a CSS Grid LayoutLayout (Calculated attribute on save in Form Designer)

Width - integer value representing the number of lines to move in Grid Layout to the end of the column ( GRID-COLUMN-END = ROW + WIDTH )

Height - integer value representing the number of lines to move in Grid Layout to the end of the row ( GRID-ROW-END = ROW + HEIGHT ) 

At the form Container level, each form control:

Besides the attributes mentioned above ROW, COLUMN, Width, Height, for the Form, Block and Fieldset we have the following extra attributes:

COLUMNS - integer representing the Grid column Template, the number of columns for representing the number of columns for the container = Grid column Template

responsiveBehaviour - string value for applying the classesclass, used generally for responsive behaviour classes. examples: "xs-setting up the responsive panel size based helper classes. 

There are several helper classes for responsive behaviour that someone could use by applying them on the Container Field level:

"xs-lower-one-col", "xs-lower-two-col" or "xs-lower-three-col" 

Responsive UI Styling

Each panel will have the "akContainerSize" DOM attribute applied on the panel level with the predefined sizes(see table below).

This will be updated whenever a panel resize is performed by the user.

The attribute can be used by frontend developers to write custom DOM attribute is useful for writing custom responsive styling, based on the size of the panel in which the form resides. 

Responsive behaviour panel sizes from "akContainerSize" and the existing helper classes:

...

The predefined classes "xs-lower-one-col", "xs-lower-two-col", "xs-lower-three-col

...

Mixins:" when applied to block level containers will change the grid-column-template to the given number.In the table above you can see the panel sizes starting from "xxs", up to "lg".

For example "xs-lower-two-col" class applied on a 4 column block, will change that block to 2 columns layout starting at "xs" size, so both "xs" and "xxs" sizes will change the block to a 2 column layout.

SASS Mixins:

A mixin allows you to make groups of CSS declarations that you can reuse throughout your application. You can even pass in values to make your mixin more flexible.

For setting up the correct column styling use the provided mixins: grid-column($index) and panel-w($sizes) and max-panel-w($sizes)..

Example 1 - Grid column mixin example:

SASS:

> .col1, > .col2, > .col3 {
 	 @include grid-column(1);
}

Would generate the CSS:

> .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 - Usage of panel-w and grid-column mixin:

SASS

// 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:

// 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 - Usage of panel-w with multiple breakpoints and grid-column mixin

SASS:

@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:

.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 stylingsstyles.

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.

For example:

Example 1( the general helper CSS classes)

Example 4. Simple one size selector with panel-w

@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:

@include panel-w(('mdsm','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 the base styling for all the form containers that have 3 or 4 columns to be , so that it gets repositioned on 2 columns when panel size is containersize sm"md".

In the first example, the selector is not taking into account the levels. (">"), so it would look inside any nested panels. This selector would be wrong:  

.dhx_cell_layout[akcontainersize="sm"] .dhxform_obj_material > .dhxform_base.f-4-col

...

.dhx_cell_layout[akcontainersize="sm"] > .dhxform_obj_material > .dhxform_base.f-4-col

...

The classes with format "f-<column number>-col" are used to apply the grid-column-templates styling.

The classes with format "col<column number>" are used to define the grid column start position and to be able is used to change column position when applying the responsive behaviour using CSSSASS. 

When you have a special use-case where you do not want to keep the responsive styling as default for all the forms with in the same structureapplication, you need to use responsiveBehaviour attribute to apply a class on that particular form field.

This will let you style the respective form control individually without changing the responsive behaviour of the other forms. only that form or a smaller group of forms..

Another example using the "xs-lower-two-col" helper class, defined in the responsiveBehaviour attribute, which can be used for changing the columns template and positioning of the cells columns from inside blocks with multiple columns defined initiallyon smaller panel sizes.

.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 reference for a new helper class.

@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,
            > .dhxform_base_nested > .f-3-col,
            > .dhxform_base_nested > .f-4-col,
            > .dhxform_base_nested > .f-5-col,
            > .dhxform_base_nested > .f-6-col,
            > .dhxform_base_nested > .f-7-col,
            > .dhxform_base_nested > .f-8-col,
            > .dhxform_base_nested > .f-9-col,
            > .dhxform_base_nested > .f-10-col,
            > .dhxform_base_nested > .f-11-col,
            > .dhxform_base_nested > .f-12-col {
                grid-template-columns: 1fr;
                > .col1, > .col2, > .col3, > .col4, > .col5, > .col6,
                > .col7, > .col8, > .col9, > .col10, > .col11, > .col12 {
                    @include grid-column(1);
                }
            }
        }

        .block_dhxform_item_label_left.xs-lower-one-col {
            > .dhxform_block > .in_block > .f-2-col,
            > .dhxform_block > .in_block > .f-3-col,
            > .dhxform_block > .in_block > .f-4-col,
            > .dhxform_block > .in_block > .f-5-col,
            > .dhxform_block > .in_block > .f-6-col,
            > .dhxform_block > .in_block > .f-7-col,
            > .dhxform_block > .in_block > .f-8-col,
            > .dhxform_block > .in_block > .f-9-col,
            > .dhxform_block > .in_block > .f-10-col,
            > .dhxform_block > .in_block > .f-11-col,
            > .dhxform_block > .in_block > .f-12-col {
                grid-template-columns: 1fr;
                > .col1, > .col2, > .col3, > .col4,
                > .col5, > .col6, > .col7, > .col8,
                > .col9, > .col10, > .col11, > .col12 {
                    @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:

• grid column of 2,3 or 4 will be changed to 1 column on xxs panel size
• grid with 2 columns will be changed to 1 column on xs
• fieldsets with 2 columns containing blocks will be changed to 1 column on xs and xss panel size
• blocks with 4 columns will be changed to 2 columns on xxs, xs and sm panel sizes
• fieldsets with 6 or 5 columns will be changed to 2 columns on xxs, xs and sm panel sizes
• forms with 3 or 4 columns will be changed to 2 columns on xs and sm panel sizes