Power Apps Layout Containers - What are they and a step-by-step walkthrough

Power Apps Layout Containers - What are they and a step-by-step walkthrough

Eric

Why use Layout Containers?

Layout Containers give you the capability to make your app more responsive by automatically reorganizing and resizing controls based on the container size. They also save a lot of time since you do not need to manually position your controls. The container will do this for you.

Enabling Layout Containers

  • Under Advanced Settings, ensure the Layout Containers toggle is on.
  • Under Screen Size and Orientation,  turn off the Scale to fit setting.
  • Open the Insert menu on the left and under the Layout heading you'll see Horizontal container and Vertical container.

Using existing layout templates

When creating a new screen, you have the option to pick from three different preconfigured screens that already use containers. You can use one of these to get started. If you need something different, you can start from these templates or start from scratch, which I'll walkthrough below.

Power Apps Default Screen Templates using Containers

Container Properties

The container properties are critical to determine the layout of your controls.

Immediately rename your container controls, so they are easy to find. I prefer to start each of my control names with a prefix describing the control, in this case, `con` to represent a Container. e.g., conHeader and conFooter.
  • Direction: Dictates the direction the controls within the container flow.
  • Justify: Justifies the controls inside the layout container horizontally.
  • Align: Aligns the controls inside the layout container vertically.
  • Width and Height: You can set the Width and Height to a specific number, base it on the Parent.Width or Parent.Height, or even make it dynamic with some formulas.
  • Gap: This determines the amount of space between the controls.
  • Overflow: Show or hide a scrollbar when the controls exceed the size of the container.
  • Wrap: Automatically wrap the controls when you run out of space.
  • Padding: The space around the outside of the container.
  • Color: Change the background color of the container.
  • Border: Add a border around the container.
  • Visible: Whether the container is visible or not. This is useful when you want to show containers dynamically based on specific conditions.

Creating a full Container Layout from scratch

Step One

We'll first need to add the main container that will be the parent of all other containers.

Step One: The main Container
  • Start with a blank page.
  • Click on the Insert (+) menu and expand the Layout heading. You'll see a Horizontal container and a Vertical container.
  • For this example, we'll start by adding a Horizontal Container.
  • Rename the control to conMain.
  • Notice, after adding the container, the size is not right. We can fix this by manually setting the width and height, or you can make this dynamic always be the size of the app itself. To do this, first, change the Position X to 0 and Position Y to 0. Then click on the container's Width property, and in the function bar, change the value to Parent.Width. This will change the width from a manual number to the width of the parent app. Change the height property to Parent.Height. Now the container is the same size as our app!

Step Two

Next, we’ll want to create our child containers.

Step Two: Navigation and Content Containers
  • Drag two Vertical Containers into your main container.
  • Rename them to conNavigation and conContent.
  • Notice again that the sizes are not quite right. Change the height property of each container to Parent.Height.
  • We also want to set our Navigation container to a fixed width of about 300. You can't do this simply by setting the Width property to 300. Look in the container property panel; you'll see that Flexible width is turned on. You'll need to turn that off and then set the Width to 300.

Step Three

Now we can add containers for the header, footer, and actual content.

Step Three: Add the Header, Footer, and Body containers.
  • Add a Horizontal Container into the existing conContainer. Rename it to conHeader. Change the Width property to Parent.Width. Turn off Flexible Height and set the Height to 80.
  • Next, add a Vertical Container to the existing conContainer. Rename it to conBody. Change the Width property to Parent.Width.
  • Add another Horizontal Container into our existing conContainer. Rename it to conFooter. Change the Width property to Parent.Width. Turn off Flexible Height and set the Height to 80.

Add Some Content Controls

You can now start adding some content controls to you each of your containers. Again, you'll want to adjust the Padding, Gap, Alignment, Justification, and Wrap properties to get your content to fit correctly. You shouldn't need to place anything manually.

Other Tips

  • You currently cannot add DataTable controls into a container. You'll need to configure a Gallery control instead.
  • You can (usually) select a control and use your arrow keys to move the control up or down. This seems hit or miss for me, but it is handy when it works.

Further Reading

Create responsive layouts in canvas apps - Power Apps
Reference information about configuring Height, Width, X, and Y properties on controls in canvas apps
Understand data-form layout for canvas apps - Power Apps
In Power Apps, create great-looking form layouts in canvas apps by using rows and columns.