Responsive Containers and Grids

Overview

Responsive Containers help the Designer define the width, length, height, and size of Layout and/or control sections on a Form.

Designers can drop more than one Responsive Container on a Form, and, because it is responsive, it will automatically adjust to fit the screen. When adding a container to the Form, each container will have its own section that can be edited to configure the Form. 

Responsive Containers can be added by either changing the Form's Surface Container Type to Responsive or by adding the Responsive Grid found via Toolbox > Layouts.

Configuration

In contrast to other Layouts which focus on moving and editing controls, Responsive Containers specifies where to place and resize controls as well as Layouts via the Sections settings.

The Sections settings contains a list of all of the Layout/controls residing in the Responsive Grid. If the control/Layout's size is small enough, it will move beside the another; however, if the control/Layout's size is too large, the it will move to the next row below.

The Margins setting grants pixel space between the Layout/control if present at all.

Once a Layout/control populates the Section setting, the Layout/control may be moved up and down the arrangement with its respective arrows or edited by hovering over the Layout and selecting the pencil icon. This will open the Edit Sections window.

Example

1. Begin with creating a new Flow in the Designer Folder. Name the Flow and select CREATE to proceed.
2. Add a Show Form step, select the PICK OR CREATE FORM button, and build a new Form.
3. Select Explorer in the left panel. Select Surface. In its Properties > Layout panel, choose Responsive as the Container Type. 
   
4. Add multiple Layouts to create the Form. This example adds a Header Container, three Grid Layouts: one with a Label, one with a Check Box, and one with a Button. 
   
5. Select Explorer in the left panel. Select Root Container[ResponsiveContainer].
6. Open the Responsive Container's Properties and navigate to Settings > Sections. All of the Layouts and Containers added to the Form are listed and available to edit their order, size, and if the layout will take up the full width of the Form.
7. Save and close the Form Designer.
   

Debug

1. In the Flow Designer, select Debug.
2. In the Debugger, the Form will display, resize the Form to see the Responsive behavior.  

Feature Changes