When you build a Power Apps canvas app, a common pattern is using a scrollable container to fit large forms, galleries, and dynamic content on a single screen. The problem: in many cases, the designer doesn’t scroll the same way as runtime. You can only scroll after pressing Play, which makes it hard to position, edit, or even select controls located “below” the visible area.

This article explains the best practices and the most reliable techniques to build scrollable screens without fighting the editor.

Power Apps: How to Edit a Screen Correctly When You Use a Scrollable Container

When you build a Power Apps canvas app, a common pattern is using a scrollable container to fit large forms, galleries, and dynamic content on a single screen. The problem: in many cases, the designer doesn’t scroll the same way as runtime. You can only scroll after pressing Play, which makes it hard to position, edit, or even select controls located “below” the visible area.

This article explains the best practices and the most reliable techniques to build scrollable screens without fighting the editor.

Why This Happens (Design-Time vs Runtime)

Power Apps has two different experiences:

• Design-time (editor): you are arranging controls on a fixed canvas. Scrolling support is limited depending on the container/control type.
• Runtime (Play): the app runs and the scroll behavior is fully enabled.

So it’s normal to see content that you can only reach when the app is running. The key is to stop relying on “mouse scrolling” during design and instead use structured layout and selection tools.

The Golden Rule: Use Tree View as Your “Scroll”

If you remember only one thing:

Never depend on the canvas scroll to select controls inside scrollable containers.
Use Tree View + properties instead.

Step-by-step

1. Open Tree view (left panel).
2. Find your scrollable container and expand it.
3. Select the control that is “down below”.
4. Edit its position using the right panel:
   • X
   • Y
   • Width
   • Height

This works even if the control is far outside the visible design area.

✅ Best practice: Rename controls (e.g., lblTitle, frmEdit, galItems, btnSave).
Tree View becomes a real navigation tool instead of a mess.

Technique 1: Temporarily Disable Scrolling While Editing

Sometimes the container is scrollable, but you want to arrange content more easily.

What to do

• Select the container
• Temporarily set scrolling off (or overflow off)
• Reposition and resize controls
• Turn scrolling back on

This makes the design surface easier to click and reduces random selection problems.

The exact property name depends on the control type (classic vs modern), but the concept is the same: disable scroll for editing.

Technique 2: Use a “Header + Scroll Body” Layout

A very common design mistake is making the entire screen scroll. It works, but it becomes painful to edit and maintain.

A better architecture:

Recommended layout

• Header area (fixed): title, navigation, action buttons, filters
• Scrollable body (container): forms, galleries, long content

Why it’s better

• The header stays accessible
• The scroll area is smaller and easier to manage
• You reduce the chance of placing controls “too far down” and losing them

Technique 3: Fix “I Can’t Click That Control” (Layering Issues)

Sometimes the control is there, but you can’t select it because something transparent is on top.

Fix it with these tools

• Tree view: select the control directly
• Reorder:
  • Bring to front
  • Send to back
• Lock:
  • Lock background containers
  • Lock large rectangles/images you don’t want to keep selecting

This is especially common when you use:

• large rectangles for backgrounds
• big containers with transparent fill
• overlays

Technique 4: Use Containers Correctly (Less Manual Positioning)

If you place everything manually, you’ll constantly adjust Y positions and heights.

Instead, use layout containers:

• Vertical container (stack)
• Horizontal container (row)
• Nested containers for sections

Benefits

• Controls flow automatically
• Less “magic numbers” in Y
• Easier to insert new fields without breaking layout

Even if you keep a fixed layout, stacking inside a scroll container is a huge win.

The “Safe Build” Pattern for Scrollable Screens

Here is a clean mental model that avoids 90% of scroll/edit pain:

1. Create a top-level screen with a fixed header
2. Add a scrollable container below the header
3. Inside the scroll container, use a vertical layout container for your content
4. Select and manage deep controls via Tree View
5. Lock backgrounds and use reorder when selection becomes painful

Common Mistakes to Avoid

❌ Putting everything directly on the screen and enabling screen scroll

This becomes hard to maintain and selection gets worse as your app grows.

❌ Huge Y gaps and random spacing

It creates “lost controls” far outside view.

❌ Not naming controls

Tree View becomes unusable, and editing becomes slow and frustrating.

Quick Troubleshooting Checklist

If you can only scroll in Play mode:

• ✅ Use Tree view to select the control
• ✅ Adjust Y / Height manually
• ✅ Temporarily disable scroll while editing
• ✅ Split the layout into Header + Scroll body
• ✅ Lock backgrounds and reorder layers

Summary Table (Steps + Technical Notes)