The ULTIMATE Guide to Power Apps Containers!

In a recent video on the Pragmatic Works channel, Solution Architect Nate Halliwell walks viewers through the power and practicality of layout containers in Power Apps Canvas apps. His goal: to demystify containers and show how they can dramatically improve app responsiveness—without writing complex formulas.

Why Containers Matter

Nate begins by comparing two home screens: one built without containers and one using them effectively. While both look similar at first glance, the difference becomes clear when previewed on devices like iPads. The non-container version breaks layout when screen orientation changes, while the containerized version remains perfectly responsive.

Common Pitfalls Without Containers

• Manual formulas for positioning and sizing elements
• Inconsistent layout across devices
• Frustration with drag-and-drop limitations

Understanding Container Types

Nate explains the structure of containerized templates in Power Apps:

• Screen Container: The root container holding all elements
• Header Container: Positioned at the top
• Bottom Container: Split into sidebar and main content areas

Tips for Working with Containers

1. Use Tree View: Understand container hierarchy and direction (horizontal vs. vertical)
2. Reorder Elements: Use right-click or drag-and-drop in Tree View
3. Stretch and Align: Use “Align in Container” and “Flexible Height/Width” properties
4. Justify Content: Center buttons and controls using alignment settings
5. Use Gap Property: Add spacing between controls for cleaner layout

Recreating a Professional Web App

Nate demonstrates how to replicate a hotel booking web app layout using nested containers. He emphasizes planning the app’s layout before building and shows how to:

• Use vertical and horizontal containers to structure headers, content, and footers
• Nest containers for granular control over alignment
• Apply padding and background colors for visual clarity
• Use drop shadows selectively to enhance depth

Advanced Layout Techniques

Nate builds a working area with two main sections:

• Left Section: Filtering controls and data gallery
• Right Section: Image and action buttons

He shows how to:

• Control minimum height and width for galleries and inputs
• Use flexible sizing to adapt to screen changes
• Bind data to galleries and display selected item details

Final Thoughts

Nate concludes by encouraging viewers to embrace containers. They eliminate the need for complex formulas and make apps naturally responsive. With a little practice, containers can save hours of development time and frustration.

For more in-depth training, Nate recommends exploring Pragmatic Works’ on-demand learning platform, which offers hundreds of videos on Power Platform, Azure, and data engineering.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Power Apps and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.