A Visual Guide To Power Apps Containers

Containers are a useful way to create layouts in Power Apps. I include them in all my of my apps now but at first I totally ignored them. Why? When Power Apps containers were released much of the hype around them was their ability to create responsive layouts. It distracted me from their true purpose: to help build layouts whether-or-not an app is responsive. Now that I know how to use containers, I can’t live without them. In this article I will show you how to use Power Apps Containers.

Table of Contents:
Why Use Containers?
Container-Types
Vertical Container & Horizontal Container Properties
Direction Property
Justify Property
Align Property
Gap Property
Overflow Property
Vertical & Horizontal Container Child Properties
Flexible Width/Flexible Height Property
Minimum Width/Minimum Height Property
Fill Portions Property

Why Use Containers?

Containers make it easier to design the layout of an app. When a control (e.g. a button) is placed inside of a container it becomes automatically positioned. It removes the error-prone positioning of drag-and-drop and the tedious nature of manually writing X & Y position properties for individual controls. Using containers will help you create pixel-perfect apps designs more quickly.

Container Types

There are 3 types of containers:

• Vertical Container: this container stacks controls up-and-down
• Horizontal Container: this container positions controls side-by-side from left-to-right
• “Container”: this container allows controls to be positioned on top of one another.

Vertical Container & Horizontal Container Properties

These properties are set at the container level (as opposed to being set on individual controls within the container).

Direction Property

Direction determines the orientation of items inside a container. A vertical container is set to vertical default whereas a horizontal container is set to horizontal. This would appear to be obvious but it should be noted that a container can change its direction at any time. A vertical container can become a horizontal container and vice versa.

A vertical container can be used to quickly create a contact card with labels stacked on top of each other whereas a horizontal container is helpful when putting together a grouped row of buttons.

Justify Property

Justify sets the position of controls inside a container along the primary axis. For a horizontal container the primary axis is left-to-right. There are four options to justify a container’s contents: left, center, right and space between. Space between positions controls with an equal space between them.

These top navigation menu examples rely on the justify property to display icons on the desired side. They are made with an alternating set of icons and labels.

Align Property

Align sets the position of controls inside a container along the secondary axis. For a horizontal container the secondary axis is up-and-down. There are four options to justify a container’s contents: start, center, end and stretch. Stretch makes the control fill the entire height of the container.

This title bar uses End for its align property to position its label and icons along the bottom of the container. Leaving space at the top is desirable for iPhones which have a camera notch there.

Gap Property

Gap determines the distance between controls. When the gap is equal to 0 controls have no space between them. As the value of gap increases controls become farther apart

The orange row of grouped buttons have a gap of 0 whereas the blue row of separated buttons have a gap of 20.

Overflow Property

Overflow defines what happens when the contents of the container exceed the size of the container. There are two options: Hide and Scroll. Hide does not show any content beyond the limits of the container.

Scroll allows the user to browse past the limits of the container using a scrollbar.

Large galleries of data with many columns sometimes extend beyond the screen. A container with the scroll property lets the user navigate to the data they need.

Wrap Property

Wrap positions controls on the next line when the container is smaller than its contents. It is useful when used with responsive apps that must be displayed on devices with various sizes.

With the wrap property forms can be made to show two columns on wider devices and one column on narrower devices.

Vertical & Horizontal Container Child Properties

These properties are set on individual controls inside a container rather than the container itself.

Flexible Width/Flexible Height Property

Flexible Width/Height sets the position of controls inside a container along the primary axis. Again, this property.

This company portal app has a sidebar with a minimum width of 220 pixels whereas the body of the app has a flexible width. As the browser gets smaller the body shrinks but the sidebar does not.

Minimum Width/Minimum Height Property

Minimum width/Minimum Height defines the smallest possible size of a flexible container. The property is only available for flexible controls.

This Reader App design uses a horizontal container with 3 flexible labels. The middle label has a minimum width of 450 pixels and the left-and-right labels have a minimum width of 0.

Fill Portions Property

Fill Portions define what fraction of the screen a control takes up. Once again, the property is only available for flexible controls.

Once again, the body of the reader app has 3 labels: a middle label with fill portion of 2 and left-and-right labels each with a fill portion of 1. The middle is twice as big as the label on either side.

Questions?

If you have any questions or feedback about A Visual Guide To Power Apps Containers please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.