Designing Adaptive Forms in Power Apps with Responsive Containers

Responsive design is no longer a luxury for modern business applications. Users expect a seamless experience whether they access an app from a desktop, tablet, or phone. In Power Apps, responsive containers make it possible to build a single form that gracefully adapts to any screen size, eliminating the need to create multiple versions of the same screen. In this guide, we will build a customer feedback form from scratch using responsive containers. You will learn how to structure your layout, set up flexible widths, handle scrolling, and add device‑specific spacing.

Scenario Overview

Imagine you are building a feedback collection tool for a retail chain. The form captures the customer’s name, a numeric rating (1–5), the feedback date, and detailed comments. The form needs to be used from in‑store kiosks (large touchscreens) and mobile devices used by roaming staff. Using responsive containers, the form automatically adjusts its width, positioning, and spacing depending on the device.

Step 1: Enable Responsive Layout

Before placing any controls, open the app settings by clicking the Settings gear. Navigate to Display and turn Scale to Fit to Off. This ensures the canvas stretches to fill the browser window without distortion.

Step 2: Prepare the Background

To give the app visual appeal, upload a background image (for example, a photo of a store interior) in the Media tab. Then select the screen and set:

• BackgroundImage: yourImageName
• ImagePosition: Fill

Step 3: Build the Root Container

A vertical container named con_Main will serve as the root element. It fills the entire screen and enables scrolling for the content inside.

Add a Vertical Container to the screen and set its properties:

Height: App.Height
Width: App.Width
X: 0
Y: 0
LayoutJustifyContent: LayoutJustifyContent.Top
LayoutAlignContent: LayoutAlignContent.Center
LayoutOverflowY: LayoutOverflowY.Scroll

LayoutOverflowY = Scroll allows the form to scroll vertically when the content is taller than the screen.

Step 4: Create the Form Card

Inside con_Main, add another Vertical Container named con_Form. This will be the white card floating above the background. To center it and limit its width on large screens, use these values:

Fill: Color.White
Height: (set later dynamically)
Width: Min(Parent.Width, Index(App.SizeBreakpoints, 2).Value)
X: (Parent.Width - Self.Width) / 2
Y: 0
LayoutJustifyContent: LayoutJustifyContent.Top
LayoutAlignContent: LayoutAlignContent.Start
PaddingLeft: 20
PaddingRight: 20
PaddingTop: 20
PaddingBottom: 20

The Width formula caps the container at the Large breakpoint (typically 1200 pixels) while allowing it to fill the entire width on smaller screens.

Step 5: Design the Header

Inside con_Form, insert a Vertical Container named con_Header. This will hold the title and subtitle.

Fill: RGBA(0, 83, 148, 1)   // deep blue
Height: 120
LayoutJustifyContent: LayoutJustifyContent.Top
LayoutAlignContent: LayoutAlignContent.Stretch
AlignInContainer: AlignInContainer.Stretch
PaddingLeft: 20
PaddingRight: 20
PaddingTop: 20
PaddingBottom: 10

Add two labels inside con_Header:

• lbl_Title – Text: “Customer Feedback”, Font: ‘Lato Black’, Size: 22, Color: White, AlignInContainer: Stretch
• lbl_Subtitle – Text: “We value your opinion”, Font: ‘Segoe UI’, Size: 14, Color: White, AlignInContainer: Stretch

Step 6: Construct the Form Body

Still inside con_Form, add another Vertical Container named con_Body. This will contain all input fields and the submit button.

Fill: Color.White
Height: (set dynamically in a later step)
LayoutJustifyContent: LayoutJustifyContent.Top
LayoutAlignContent: LayoutAlignContent.Start
AlignInContainer: AlignInContainer.Stretch
PaddingLeft: 20
PaddingRight: 20
PaddingTop: 10
PaddingBottom: 10

Step 7: Add Input Fields

Each field group consists of a label (the question), a control, and a spacer label (to provide consistent vertical gaps). You can repeat this pattern for every question in your form.

Full‑Width Text Input (Customer Name)

• lbl_Name – Text: “1. Customer Name”, Height: 40, Size: 12, AlignInContainer: Stretch
• txt_Name – Text Input, Height: 40, Size: 12, AlignInContainer: Stretch
• lbl_Spacer1 – Label, Height: 20, AlignInContainer: Stretch

Fixed‑Width Date Picker (Feedback Date)

• lbl_Date – Text: “2. Feedback Date”, Height: 40, Size: 12, AlignInContainer: Stretch
• dtp_Date – Date Picker, Height: 40, Width: 300, AlignInContainer: Left (keeps a fixed width aligned left)
• lbl_Spacer2 – Label, Height: 20, AlignInContainer: Stretch

Additional Fields

Add a dropdown for Rating (3) and a multi‑line text input for Comments (4). Controls that should stretch to the full available width must have AlignInContainer = Stretch. Controls that should stay at a fixed size (like the date picker) use AlignInContainer = Left.

Step 8: Place the Submit Button

After the last field group, add a button named btn_Submit with Text “Submit Feedback”. Set its Height to 48 and AlignInContainer to Stretch.

Now make the body container’s height dynamic so it never cuts off content. Set the Height of con_Body to:

btn_Submit.Y + btn_Submit.Height + 40

This expression ensures the body is always 40 pixels below the button.

Step 9: Link the Form Container’s Height

The con_Form container must expand to include both the header and the body. Set its Height to:

con_Header.Height + con_Body.Height

Step 10: Add Gutters for Large Screens

On large screens, you may want a vertical space between the screen edges and the form. Add two Horizontal Containers inside con_Main (outside con_Form): one before the form (top gutter) and one after it (bottom gutter). Set their Height to 40 and make them visible only on large screens:

App.ActiveScreen.Size >= ScreenSize.Large

On small and medium screens the gutters disappear, allowing the form to use the full height.

Step 11: Test Responsiveness

Save and publish the app. Open it in a browser window and resize it. On narrow widths the form fills the entire screen. On wide screens it stops expanding at 1200 pixels, leaving the background visible on the sides. Scrolling works smoothly on all devices.

Security and Performance Considerations

• Delegation: The responsive UI itself does not affect data delegation. If your form submits to SharePoint or Dataverse, ensure the underlying queries are delegable (e.g., avoid using Filter with non‑delegable functions in a gallery inside the container).
• Performance: Deep nesting of containers can cause rendering delays. Keep the hierarchy to a maximum of three or four levels. Use LayoutOverflowY = Scroll sparingly because scrollable containers can impact performance when they hold many controls.
• Accessibility: Controls that stretch with AlignInContainer maintain proper touch targets on mobile, but always test with real devices to confirm contrast and touch area compliance.

Common Mistakes

• Forgetting to disable Scale to Fit: Without this, the canvas stays fixed and containers will not resize.
• Setting fixed widths on every control: Controls that should adapt to the form width must have AlignInContainer = Stretch.
• Not enabling scroll overflow: If the form content exceeds the container height and scrolling is off, fields will be cut off.
• Using a static Height on the form body: Always base it on the position of the last control (the submit button). Otherwise the layout may clip or leave excessive space.

Final Recommendation

Responsive containers are the recommended way to build forms in Power Apps today. They drastically reduce the effort needed to support multiple device sizes. Start every new app with a responsive container structure and you will avoid layout headaches later.

References

• Original reference by Matthew Devaney: How To Build Responsive Power Apps Forms From Scratch
• Microsoft Learn: Build responsive layouts in canvas apps