Responsive GridLayout with CSS
  • 03 Jun 2022
  • 3 Minutes to read
  • Dark
    Light
  This documentation version is deprecated, please click here for the latest version.

Responsive GridLayout with CSS

  • Dark
    Light

Overview

The GridLayout uses CSS Grid to control the layout. Not only does this reduce HTML overhead compared to its predecessor, but this also opens the door for users authoring CSS documents to use CSS to control the layout of the form. This CSS control ability is particularly useful for creating responsive layouts.

Prerequisite
Review Using CSS with Forms to learn how to add CSS documents to Decisions and apply them to Forms.

Example

The below Form layout will be rearranged using CSS Media Queries to tighten spacing and change the layout from a two-column layout to a one-column layout, based on the browser’s size. This is accomplished by adding CSS class names to the elements to control and then defining different rules for those elements in the CSS document. In broad terms, three things are done: 

  • Apply class name to root to override its default size behavior 
  • Apply class names to specific child containers to override their position as configured in Form Designer 
  • Apply a CSS class to the Form containing @media breakpoints with rules for the class names above, which override certain settings on smaller screens. 
This example is available to be downloaded here.

  1. Begin in the Form Designer. In the Properties panel, navigate to Layout > Container Type, change this to GridLayout
  2. This Form uses a GridLayout, where there is one GridLayout to cover the base of the Form, and other sections are added within. GridLayouts can contain any combination of rows and columns.
  3. Add the CSS to Decisions then apply it to this Form. Learn how to do this in the Using CSS with Forms article. 
  4. Each GridLayout will need a CSS Class assigned to it. With a GridLayout selected, in the Properties panel, expand View, and choose the CSS Class.
    GridLayoutCSS Class
    Root GridLayoutouter-grid
    First Card GridLayoutcard-grid one
    Second Card GridLayoutcard-grid two
    First Name GridLayout.input-1-1 {}  nothing to define for 1-1. The configured behavior is the same.
    Last Name GridLayoutinput-1-2
    Email GridLayoutinput-1-3
    Call Sign GridLayoutinput-1-4
    Street GridLayout.input-1-1 {} nothing to define for 1-1. The configured behavior is the same.
    City GridLayout input-1-2
    State GridLayout input-1-3
    Zip GridLayout input-1-4
Notice, on the GridLayout that contains the label "Zip" and the Textbox. The CSS Class is set as "input-1-4".  The "Zip” container is in the 2nd row, 2nd column, but in the CSS document, the class "input-1-4" is used as a handle to change this element to be in the 1st column, 4th row below a certain screen size. This is tested by adding this Form to a Flow then selecting Integration in the Flow Designer's top action panel.


Debug

  1. Add this Form to a Flow to Debug.
  2. In the Flow Designer, click Integrations from the top panel.
  3. Select UI/Form under Setup > Run As
  4. Choose Direct URL as the Embed Type, then select GENERATE UI CODE
  5. Open the URL generated.
  6. When the Form opens, adjust the browser's size to ensure the CSS is working as expected.

CSS used in Example

Below is the CSS used in this example. The main blocks are the @media screen blocks. The first @media screen declares card grid styles for when the screen size is 800 pixels or above. The second @media screen redefines the CSS Grid positions for the class names associated with those elements on screens below 800 pixels. This will override the original styles created by the Form Designer.

The grid-column and grid-row here define the start and end cells of the CSS for each element. Because they are defined by CSS for GridLayout, they can be modified by CSS, which gives the CSS author complete control. For example, some additional vendor-specific CSS to support old browsers.

@media screen and (min-width: 800px) 
{ 
.outer-grid .card-grid 
{ 
border: solid 1px rgba(0, 0, 0, 0.15); 
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 0px 3px 9px rgba(0, 0, 0, 0.2); 
} 
}
 
@media screen and (max-width: 799px)
{ 
.outer-grid 
{ 
padding: 0 0 15px !important; 
/* remove outer margin on three sides */ 
row-gap: 0 !important; 
/* remove gutters between the cards */ 
width: auto !important; 
/* allow form to shrink below designed width */ 
} 
.outer-grid .card-grid:nth-child(odd) 
{
border-top: solid 1px rgba(0, 0, 0, 0.3); 
/* add a border where the row gap gutter was */ 
}
 .outer-grid .card-grid 
{ 
/* Change to 1 column, 8 rows */ 
grid-template-columns: auto !important;
grid-template-rows: 92px 92px 92px 92px !important; 
} 
/* .input-1-1 {} nothing to define for 1-1. The configured behavior is the same. */ 
.input-1-2 
{ 
/* Moves to column 1, row 2 of the grid */ 
grid-column: 1 / 2 !important; 
grid-row: 2 / 3 !important; 
} 
.input-1-3 
{ 
/* Moves to column 1, row 3 of the grid */ 
grid-column: 1 / 2 !important;
grid-row: 3 / 4 !important; 
} 
.input-1-4 
{ 
/* Moves these to column 1, row 4 of the grid */ 
grid-column: 1 / 2 !important;
 grid-row: 4 / 5 !important; 
} 
}

Was this article helpful?