---
title: "Responsive Canvas on Form"
slug: "responsive-canvas-on-form"
updated: 2022-02-22T13:49:02Z
published: 2022-02-22T13:49:02Z
canonical: "documentation.decisions.com/responsive-canvas-on-form"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive Canvas on Form

Example Lab ArticleWhile Example Lab projects are resources for public use, articles and assets are not actively maintained. Screenshots and features are from the specified version below. These references may become dated as new versions are released.

---

## Overview

| ## Example Lab Details |
| --- |
| **Version** | 6.12.1 |
| **Root Folder** | Example Lab-Responsive Form |
| **Modules** | None |
| **Dependencies** | None |

This Example Lab demonstrates how to setup a Form with a Responsive container.

---

## Explanation

For this example, two Forms were set up: ****"Responsive Form"**** Form uses a plain Canvas while **"Responsive Form"** uses a Responsive container. When running the Form, the Responsive Form automatically adjusts its settings to fit the screen. In the **"Regular Canvas"** Form the **Container Type** setting under **Properties>Layout** is set to "Canvas". In the **"Responsive Form"** the **Container Type** is set to "Responsive. Both Forms have three grids. The top grid has a label. The middle grid has Image. The bottom grid has a Button. The **"Run non responsive Form"** Flow will run the **"Regular Canvas"** Form. The **"****Run Responsive Form"** Flow will run the **"Responsive Form"**. Run the Form and then adjust the Form size using the lower-right corner of the Form. The controls of the **Responsive Form** will move to fit the screen. However, controls within the **Regular canvas** Form will not move and be hidden.

Reference Articles[How to Use Responsive Containers (Forms)](https://documentation.decisions.com/v7/docs/responsive-containers-grids)

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Canvas%20Type.png)

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Form(1).png)

---

## Project Download

The examples attached were developed to be instructional and were not developed as officially supported components. For more information or to engage our service team to develop fully supported, production quality solutions, please contact services@decisions.com. Import the project below to a Decisions environment on version 6.12.1 or later using our [Importing/Exporting](https://documentation.decisions.com/docs/exporting-and-importing-overview) article.  
  
  
[ExampleLab[ResponsiveForm].zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ExampleLab%5BResponsiveForm%5D.zip)

---