Tutorials/Power Apps/Power Apps Containers Unplugged: Designing Without the Drag-and-Drop Hassle
Power Appsintermediate

Power Apps Containers Unplugged: Designing Without the Drag-and-Drop Hassle

Stop fighting with X and Y coordinates. Learn how vertical, horizontal, and overlay containers can give you pixel-perfect layouts in minutes.

NA
Narmer Abader
@narmer · Published June 3, 2026

Every canvas app maker knows the pain of tweaking X and Y coordinates, only to have a label overlap a button after a screen resize. Containers solve that by handling positioning for you. Think of them as invisible boxes that arrange their child controls according to rules you set. Once you get comfortable with them, you'll never want to go back to manual coordinates.

This article walks through the three container types, the properties that control them, and how to combine them into a real interface. Along the way we'll build a sample Event Registration Dashboard so you can see the ideas in action.

The Three Faces of Containers

Power Apps offers three container flavors. Each one arranges its children differently.

  • Vertical container – stacks controls one above the other. Use it for forms, lists, or card layouts where elements read top to bottom.
  • Horizontal container – places controls side by side, left to right. Ideal for toolbars, button groups, or any row-oriented design.
  • Container – an overlay container that lets controls overlap. Good for badges, floating icons, or layered backgrounds. This is the default when you insert a container from the ribbon.

Most of your layouts will use vertical and horizontal containers. The overlay container is reserved for special situations (like positioning a "sold out" badge over a product image).

Properties That Govern the Whole Container

When you select a vertical or horizontal container, you'll see several properties in the right panel. They affect every control inside the box.

Direction

The container's Direction is set automatically when you choose vertical or horizontal. You can still flip it at any time: set Direction to Vertical to turn a horizontal container into a stack, or Horizontal to make a vertical container a row. Handy when you decide to rearrange the hierarchy.

Justify – Aligning Along the Main Axis

Justify positions child controls along the container's primary axis.

  • Start – packs controls at the beginning (top for vertical, left for horizontal).
  • Center – clusters controls in the middle.
  • End – pushes controls to the end (bottom for vertical, right for horizontal).
  • SpaceBetween – spreads controls evenly with the first flush to start and the last flush to end.

In our dashboard, the header uses a horizontal container with Justify = SpaceBetween. The company logo stays on the left, the screen title in the middle, and the new-registration button on the right – all without a single X/Y calculation.

Align – Adjusting Along the Cross Axis

Align moves controls sideways relative to the main axis.

  • Start – aligns to the left (vertical) or top (horizontal).
  • Center – centers along the cross axis.
  • End – aligns to the right (vertical) or bottom (horizontal).
  • Stretch – makes controls fill the entire cross-axis length.

For the header container, Align = Center keeps the logo, title, and button vertically centered. If we had a vertical container for registration fields, Align = Stretch would make each input box expand to the full container width.

Gap – Adding (or Removing) Breathing Room

Gap controls the space between child controls. A value of 0 means no margin; increase it to create separation. This is much cleaner than setting Padding on individual controls.

In the dashboard's main horizontal container, we set Gap = 20 to leave a comfortable gutter between the left registration form and the right attendee list.

Overflow – When Content Exceeds the Box

Two options control what happens when child controls are taller or wider than the container.

  • Hide – clips the excess content. Nothing scrollable.
  • Scroll – adds a scrollbar so users can reach hidden content.

Your attendee gallery may contain hundreds of names. Wrap the gallery in a vertical container and set Overflow = Scroll. The container becomes a scrollable region without you writing a single line of Power Fx.

Wrap – Going Multi‑Line on Small Screens

Wrap is a boolean (On / Off). When On, child controls that don't fit on one line flow to the next. This is especially useful for responsive forms: two columns on a wide screen, one column on a narrow screen.

Child‑Level Properties: Fine‑Tuning Each Control

Once a control sits inside a container, it inherits layout rules. But you can override how an individual child behaves.

Flexible Width / Flexible Height

These toggles (default On for containers) tell the control to resize with the container. Set FlexibleWidth = Off to lock a control's width to a fixed number. The header logo, for example, might have FlexibleWidth = Off and a fixed width of 120 so it never shrinks.

Minimum Width / Minimum Height

Available only when flexible sizing is on. MinimumWidth and MinimumHeight put a floor on how small the control can get. The registration form panel should never drop below 300 pixels, so we set MinimumWidth = 300. As the screen shrinks, the attendee list panel takes the reduction instead.

Fill Portions

When multiple flexible children live in the same container, FillPortions divides the available space proportionally. The default is 1 per child. If the left panel has FillPortions = 2 and the right panel has FillPortions = 1, the left side gets two‑thirds of the space.

In our dashboard, the left (form) panel uses FillPortions = 2 and the right (attendee list) panel uses FillPortions = 3, giving the list slightly more room for columns like Name, Email, and Ticket Type.

Building the Event Dashboard Step by Step

Let's assemble the scenario with concrete steps.

  1. Header – Insert a horizontal container, name it HeaderContainer. Inside it place three controls: an Image (logo), a Label ("Event Registration"), and a Button ("+ New Attendee"). Set Justify = SpaceBetween, Align = Center, Gap = 10. The logo has FlexibleWidth = Off, width 120. The button has FlexibleWidth = Off as well. The label stretches to fill the middle.

  2. Main body – Add a horizontal container called BodyContainer. Inside it add two vertical containers: FormPanel and ListPanel. Set container Gap = 20 and Align = Stretch (so each vertical container fills the full height).

  3. Registration form – In FormPanel, drop a vertical container for the form fields. Set its Align = Stretch so inputs fill the panel width. Add Labels and DataCards for RegistrantName, Email, TicketType, and a Submit button. Use Gap = 15 between fields. Set MinimumWidth = 280 on this panel.

  4. Attendee list – In ListPanel, add a Gallery control (Horizontal or Vertical, depending on data). Set the gallery's FlexibleHeight = Off (so it doesn't resize with the container) because we want the container's scroll to work. Instead, set the gallery's Height = Parent.Height (or let it fill the container if it's a child with flexible height). Then set the container Overflow = Scroll. Add Labels inside the gallery for Name, Email, Ticket Type, and Status.

  5. Fine‑tune proportions – On FormPanel, set FillPortions = 2. On ListPanel, set FillPortions = 3. As the app window changes, the form takes 40% and the list takes 60%.

  6. Make it responsive – If you expect the app to run on tablets and phones, consider setting Wrap = On on a wrapper vertical container. This will push the list below the form when the screen is very narrow.

Common Mistakes and How to Avoid Them

  • Forgetting to turn off FlexibleWidth on fixed‑size elements. The logo and button in the header would stretch if you left both on. Lock them by toggling FlexibleWidth = Off and setting an explicit width.

  • Using an overlay container when you need a stack. A basic Container (the third type) lets controls overlap but does not automatically arrange them. Stick to vertical/horizontal unless you specifically want layering.

  • Not setting a MinimumWidth for flexible children. Without it, a panel can shrink to zero when the screen narrows, hiding controls. Always set a sensible minimum.

  • Confusing Justify and Align. Remember: Justify works along the container's main axis (vertical for vertical containers, horizontal for horizontal). Align works along the cross axis. A quick trick: think of a row of buttons – Justify spaces them left‑to‑right, Align moves them up or down inside the row.

  • Hard‑coding sizes inside a container. If you set X and Y manually on a child control, it breaks out of the container layout. Use flexible properties and FillPortions instead.

Final Thoughts

Containers aren't just for responsive apps – they make every app easier to design and maintain. Even if you don't plan to support multiple screen sizes, adopting containers eliminates the headache of manual coordinates and lets you move, add, or rearrange controls in seconds.

Start your next app by inserting a container for every major section: header, navigation, body, footer. Then fill them with content. You'll be surprised how much cleaner your logic becomes when you stop worrying about X and Y.

References