Responsive UI

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

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

Form Containers are blocks, fieldsets and the actual 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

COLUMN - integer value representing the starting column grid line in a CSS Grid Layout

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, the Form, Block and Fieldset have the following extra attributes:

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

responsiveBehaviour - string value for applying the classes, used generally for responsive behaviour classes. examples: "xs-two-col" or "xs-three-col"

Responsive UI Styling

Each panel will have "akContainerSize" DOM attribute applied on the panel level. This will be updated everytime on a panel resize.

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

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

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:

.dhx_cell_layout[akcontainersize="md"]{ // md size, 
  .dhxform_obj_material > .dhxform_base.f-3-col, 
  .dhxform_obj_material > .dhxform_base.f-4-col {
    
  }
}

Do:

.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;
    }
  }
}

Notice in this example, we wrote base styling for all the form containers that have 3 or 4 columns to be repositioned on 2 columns when panel is containersize sm.

In the don't do 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

Correct example, that takes only the first child and would not conflict with nested panels:

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

The classes with format "col<column number>" are used to define the grid column start position.

When you have a special use-case where you do not want to keep the styling as default for all the forms 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.

Another example using the "xs-two-col" helper class, which can be used for changing the columns template and positioning of cells inside blocks with multiple columns defined initially.

.block_dhxform_item_label_left.xs-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 {
        grid-column-start: 2 !important;
        grid-column-end: 3 !important;
        grid-row-start: auto !important;
        grid-row-end: auto !important;
        }
        > .col1, > .col3, > .col5, > .col7, > .col9 {
        	grid-column-start: 1 !important;
        	grid-column-end: 2 !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:

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

Page tree

Responsive UI