DiscoverM365 Show with Mirko Peters - Microsoft 365 Digital Workplace DailyStop Building Ugly Power Apps: Master Containers Now
Stop Building Ugly Power Apps: Master Containers Now

Stop Building Ugly Power Apps: Master Containers Now

Update: 2025-10-19
Share

Description

Opening – The Ugly Truth About Power Apps

Most Power Apps look like they were designed by someone who fell asleep halfway through a PowerPoint presentation. Misaligned buttons, inconsistent fonts, half-broken responsiveness—the digital equivalent of mismatched socks at a corporate gala. The reason is simple: people skip Containers. They drag labels and icons wherever their mouse lands, then paste formulas like duct tape. Meanwhile, your branding department weeps. But here’s the fix: Containers and component libraries. Build once, scale everywhere, and stay perfectly on-brand. You’ll learn how to make Power Apps behave like professional software—responsive, consistent, and downright governed. IT loves structure; users love pretty. Congratulations—you’ll finally please both.

Section 1 – Why Your Apps Look Amateur

Let’s diagnose the disease before prescribing the cure. Most citizen-developed apps start as personal experiments that accidentally go global. One manager builds a form for vacation requests, another copies it, changes the color scheme “for personality,” and within six months the organization’s internal apps look like they were developed by twelve different companies fighting over a color wheel. Each app reinvents basic interface patterns—different header heights, inconsistent padding, and text boxes that resize like they’re allergic to symmetry.

The deeper issue? Chaos of structure. Without Containers, Power Apps devolve into art projects. Makers align controls by eye and then glue them in place with fragile X and Y formulas—each tweak a cascading disaster. Change one label width and twenty elements shift unexpectedly, like dominoes in an earthquake. So when an executive asks, “Can we add our new logo?” you realize that simple graphic replacement means hours of manual realignment across every screen. That’s not design; that’s punishment.

Now compare that to enterprise expectations—governance, consistency, reliability. In business, brand identity isn’t vanity; it’s policy. The logo’s position, the shade of blue, the margins around headers—all of it defines the company’s visible integrity. Research on enterprise UI consistency shows measurable payoffs: users trust interfaces that look familiar, navigate faster, make fewer mistakes, and report higher productivity. When your Power Apps look like cousins who barely talk, adoption plummets. Employees resist tools that feel foreign, even when functionality is identical.

Every inconsistent pixel is a maintenance debt note waiting to mature. Skip Containers and you multiply that debt with each button and text box. Update the layout once? Congratulations: you’ve just updated it manually everywhere else too. And the moment one screen breaks responsiveness, mobile users revolt. The cost of ignoring layout structure compounds until IT steps in with an “urgent consolidation initiative,” which translates to rebuilding everything you did that ignored best practices. It’s tragic—and entirely avoidable.

Power Apps already includes the cure. It’s been there this whole time, quietly waiting in the Insert panel: Containers. They look boring. They sound rigid. But like any strong skeleton, they keep the body from collapsing. And once you understand how they work, you stop designing hunchbacked monsters disguised as apps.

Section 2 – Containers: The Physics of Layout

A container in Power Apps is not decoration—it’s gravitational law. It defines how elements exist relative to one another. You get two major species: horizontal and vertical. The horizontal container lays its children side by side, distributing width according to flexible rules; the vertical one stacks them. Combine them—nest them, actually—and you create a responsive universe that obeys spatial logic instead of pixel guessing.

Without containers, you’re painting controls directly on the canvas and telling each, “Stay exactly here forever.” Switch device orientation or resolution, and your app collapses like an untested building. Containers, however, introduce physics: controls adapt to available space, fill, shrink, or stretch depending on context. The app behaves more like a modern website than a static PowerPoint. Truly responsive design—no formulas, no prayers.

Think in architecture: start with a screen container (the foundation). Inside it, place a header container (the roofline), a content container (the interior rooms), and perhaps a sidebar container (the utility corridor). Each of those can contain their own nested containers for buttons, icons, and text elements. Everything gets its coordinates from relationships, not arbitrary numbers. If you’ve ever arranged furniture by actual room structure rather than coordinates in centimeters, congratulations—you already understand the philosophy.

Each container brings properties that mimic professional layout engines: flexible width, flexible height, padding, gap, and alignment. Flexible width lets a container’s children share space proportionally—two buttons could each take 50%, or a navigation section could stretch while icons remain fixed. Padding ensures breathing room, keeping controls from suffocating each other. Gaps handle the space between child elements—no more hacking invisible rectangles to create distance. Alignment decides whether items hug the start, end, or center of their container, both horizontally and vertically. Together, these rules transform your canvas from a static grid into a living, self-balancing structure.

Now, I know what you’re thinking: “But I lose drag-and-drop freedom.” Yes… and thank goodness. That freedom is the reason your apps looked like abstract art. Losing direct mouse control forces discipline. Elements no longer wander off by one unintended pixel. You position objects through intent—“start, middle, end”—rather than by chance. You don’t drag things; you define relationships. This shift feels restrictive only to the untrained. Professionals call it “layout integrity.”

Here’s a fun pattern: over-nesting. Beginners treat containers like Russian dolls, wrapping each control in another container until performance tanks. Don’t. Use them with purpose: structure major regions, not every decorative glyph. And for all that is logical, name them properly. “Container1,” “Container2,” and “Container10” are not helpful when debugging. Adopt a naming convention—cnt_Header, cnt_Main, cnt_Sidebar. It reads like a blueprint rather than a ransom note.

Another rookie mistake: ignoring the direction indicators in the tree view. Every container shows whether it’s horizontal or vertical through a tiny icon. It’s the equivalent of an arrow on a road sign. Miss it, and your buttons suddenly stack vertically when you swore they’d line up horizontally. Power Apps isn’t trolling you; you simply ignored physics.

Let’s examine responsiveness through an example. Imagine a horizontal container hosting three icons: Home, Reports, and Settings. On a wide desktop screen, they align left to right with equal gaps. On a phone, the available width shrinks, and the same container automatically stacks them vertically. No formulas, no conditional visibility toggles—just definition. You’ve turned manual labor into consistent behavior. That’s the engineering leap from “hobby project” to “enterprise tool.”

Power Apps containers also support reordering—directly from the tree view, no pixel dragging required. You can move the sidebar before the main content or push the header below another region with a single “Move to Start” command. It’s like rearranging Lego pieces rather than breaking glued models.

Performance-wise, containers remove redundant recalculations. Without them, every formula reevaluates positions on screen resize. With them, spatial rules—like proportional gaps and alignment—are computed once at layout level, reducing lag. It’s efficiency disguised as discipline.

There’s one psychological barrier worth destroying: the illusion that formulas equal control. Many makers believe hand-coded X and Y logic gives precision. The truth? It gives you maintenance headaches and no scalability. Containers automate positioning mathematically and produce the same accuracy across devices. You’re not losing control; you’re delegating it to a system that doesn’t get tired or misclick.

Learn to mix container types strategically. Vertical containers for stacking sections—header atop content atop footer. Horizontal containers within each for distributing child elements—buttons, fields, icons. Nesting them creates grids as advanced as any web framework, minus the HTML anxiety. The result is both aesthetic and responsive. Resize the window and watch everything realign elegantly, not collapse chaotically.

Here’s the ultimate irony: you don’t need a single positioning formula. Zero. Entire screens built through containers alone automatically adapt to tablets, desktops, and phones. Every update you make—adding a new field, changing a logo—respects the defined structure. So when your marketing department introduces “Azure Blue version 3,” you just change one style property in the container hierarchy, not sixteen screens of coordinates.

Once you master container physics, your organization can standardize layouts across dozens of apps. You’ll reduce support tickets about “missing buttons” or “crushed labels.” UI consistency becomes inevitable, not aspirational. This simple structural choice enforces the visual discipline your corporation keeps pretending to have in PowerPoint presentations.

And once every maker builds within the same invisible skeleton, quality stops being a coincidence. That’s when we move from personal creativity to governed design. Or, if you prefer my version: elegance through geometry.

Section 3 – Component Libraries: Corporate Branding on Autopilot

Containers are how you

Comments 
00:00
00:00
x

0.5x

0.8x

1.0x

1.25x

1.5x

2.0x

3.0x

Sleep Timer

Off

End of Episode

5 Minutes

10 Minutes

15 Minutes

30 Minutes

45 Minutes

60 Minutes

120 Minutes

Stop Building Ugly Power Apps: Master Containers Now

Stop Building Ugly Power Apps: Master Containers Now

Mirko Peters - M365 Specialist