How to Use Responsive Containers (Forms)
  • Updated on 29 May 2018
  • 4 minutes to read
  • Print
  • Dark
    Light

How to Use Responsive Containers (Forms)

  • Print
  • Dark
    Light

Overview

Responsive Containers help the designer to more easily define the width, length, height, and size of sections on a form. When using Responsive Containers you can drop more than one container type on a form and because it is responsive it will automatically adjust its settings to fit the screen. When you add a container to the form each container will have its own section that you can edit to configure your form. In contrast, Grids will allow you to move and edit the size of components while Responsive Containers will allow you to specify where you want your grid as well as configure its dimensions. When your form is set to responsive under container type in the properties panel the containers will automatically adjust as you drag and drop them where you want on your form. Grids allow you to move the size of different components, while responsive containers allow you to specify where you want your grid to be as well as its dimensions. 
Note: When you resize your form the Responsive Containers will shift dynamically as the device changes. If the Form is displayed side by side on a computer screen and then opened in a mobile phone the form will shift and the Responsive Containers will display vertically instead of horizontally.

Example

In the example below, you will see a demonstration of how to use and edit Responsive Containers with multiple containers. Start by selecting Create Form in the blue Action Panel located on the bottom of theDesigner Studio.
create-form.jpg

Choose your template and selectCreate:
create-form-3.jpg

Name your form and selectCreate:
Name-form.jpg

Start with a blank canvas, you may have to delete the grids off of the Form. Select the grid and delete until the Form is a blank canvas. 
responsive-container.jpg

Now in the Properties Tab on the right underLayout select the drop-down menu and set theContainer Type to Responsive .
Responsive-Type.jpg

Grid 1: Header Grid
Locate the Steps Tab on the right, selectLayouts>Grid , drag the Step onto the Form and drop. 
grid.jpg

Drag and drop your first Grid onto the blankResponsive Container Form.
Grid-1-before-settngs.jpg

In this example, we will name four separateGrids and set the dimensions for each. Name the first grid and set the settings using the images below
Header-3.jpg

After you set the settings forGrid 1 the Form should look like the image below. 
12.jpg

Grid 2: Information Grid
Locate the Steps Tab on the right, selectLayouts>Grid , drag the Step onto the Form and drop. Drag and drop your second Grid onto theResponsive Container Form.
before-settings-2.jpg

Name the second Grid and set the settings using the images below. 
Information-Grid.jpg

After you set the settings for Grid 2 , the Form should look like the image below. This Grid did not need any changes in its settings. 
grid-2-after-1.jpg

Grid 3: Footer Grid
Locate the Steps Tab on the right, selectLayouts>Grid , drag the Step onto the Form and drop. Drag and drop your third Grid onto theResponsive Container Form.
31.jpg

Name the third Grid and set the settings using the images below. When setting the settings notice the Astrid (), this shows that you have selected that Column or Row to either Resize, Grow or Fix. Make sure that each number has the appropriate Astrid. Select the drop-down menu under Layout to choose the Resize type.
Under Columns , Set 1 toResize . Select the
pencil icon* to edit the column size. Choose the drop-down menu and select Resize . Set 120 to Fixed by selecting Fixed in the drop-down menu. Set 20 to Fixed by selecting Fixed in the drop-down menu. Under Rows, set 1 to Resize. Set 30 to Fixed and set the last 1 to Resize.
Footer-Grid.jpg

In the drop-down menu choose the Resize Type for eachColumn or Row.
drop-down-astrid.jpg

After you set the settings for Grid 3 , the Form should look like the image below. 
3rd-grid.jpg

Grid 4: Grid
Locate the Steps Tab on the right, selectLayouts>Grid , drag the Step onto the Form and drop. Drag and drop your Forth Grid onto theResponsive Container Form.
grid-4.jpg

Name the forth Grid and set the settings using the images below. 
Grid-2.jpg

Navigate to the Form, right click and choose>Select Parent [Root Container [Responsive Container] to edit sections. Hover over the pencil icon and select to edit sections. 
spar.jpg

Next on the right in the Properties PanelEdit sections by selecting the Pencil Icon. This gives the option to edit Minimum Width and Height of the Form. 
edit-properties.jpg

Grid 1, Header Grid: Select the box Take Full Width . This selection will cause the Header Grid to always take the Full Width of the form. 
Full-Width-1.jpg

Grid 2, Information Grid: Change the minimum width to 100.
Info-sections.jpg

Grid 3, Footer Grid: Select the box Take Full Width . This selection will cause the Header Grid to always take the Full Width of the form. 
Footer-section.jpg

Grid 4, Grid: Change the minimum width to 300.
Grid-Sections.jpg

After setting the Width and Heights the Form should look like the example in the image below. 
final-grid-before-button.jpg

Finally, design your layout with labels and text, add a button and complete your Form. Here is an example of what your form should look like as a Responsive Container using four different Grids.
Responsive-Containers-Form.jpg

You have now completed theResponsive Containers tutorial, now that we have created our first Responsive Container form you can create a new flow to test the form.

For more information on how to run a form inside a flow go to the following link:
https://documentation.decisions.com/creating-your-first-form-flow/
To learn more about Responsive Containers watch the video webinar on Responsive Forms in the link below: 
https://decisions.com/videos/responsive-forms/?submissionGuid=34633ccf-236a-4647-950b-850094450b9f

Was this article helpful?