Create a Scrollable Screen for Custom Power Apps Layouts

When you need to display a form, a dashboard, or any custom screen that contains more content than the visible area, you have to create your own scrollable region. Power Apps galleries and edit forms handle this automatically, but for bespoke layouts a vertical container gives you full control. By simply toggling one property, you can turn an ordinary container into a smooth‑scrolling pane.

This article walks through building an Employee Training Course Catalog—a real‑world scenario where you have variable‑length descriptions, a dynamic list of topics, and multiple data fields. You’ll see how to:

• Prepare a SharePoint list as the data source.
• Add a vertical container and enable scrolling.
• Use auto‑height labels and galleries that adapt to their content.
• Reset the scroll position when the user moves between records.

The same technique works for any app that needs a scrollable layout—project trackers, help desks, inventory views, etc.

Example Scenario: Training Course Catalog

Your HR team maintains a SharePoint list called Training Courses with the following columns:

The app will let a user pick a course from a dropdown and then view its full details inside a scrollable area. Because the description can be long and the number of topics can vary between one and four, the scrollable region must adapt dynamically.

Step 1: Create the SharePoint List

1. Go to SharePoint and create a new list named Training Courses.
2. Add the columns shown above. For Topics, open the column settings, select “Choice”, enter the four options, and enable Allow multiple selections.
3. Insert a few test rows. Make the descriptions different lengths (from a short sentence to three paragraphs) to verify that the auto‑height labels work correctly.

Step 2: Build the Screen with a Vertical Container

1. Open Power Apps Studio and create a new tablet app from blank.

2. Rename the default screen to CourseCatalog.

3. Insert a Label at the top and set its Text to "Training Course Catalog"—this will serve as the header.

4. From the Insert pane, search for Vertical container and drop it onto the screen.

5. Resize the container so it fills the canvas under the header, leaving a small margin at the bottom.

6. With the container selected, go to the right‑hand properties panel, find VerticalOverflow, and change it from “Hidden” to Scroll.

   In Power Fx you can also set it programmatically:

   powerfxVertical container overflow setting

   Copy

   VerticalOverflow = VerticalOverflow.Scroll

Now any controls placed inside the container that extend beyond its bounds will cause a scrollbar to appear.

Step 3: Add Controls Inside the Container

Select the Current Course

Add a Text input or a Dropdown above the container (still inside the header area) to let the user choose which course to display. For this example we’ll use a Dropdown.

1. Insert a Dropdown control next to the header.

2. Set its Items property to the SharePoint list:

   powerfxDropdown items

   Copy

   Items = 'Training Courses'

3. In the container, add a Label for the course title and set its Text to:

   powerfxCourse title label

   Copy

   Text = LookUp('Training Courses', ID = Dropdown1.Selected.ID, Title)

4. Add labels for DurationHours and StartDate. Their Text properties follow the same pattern. For example:

   powerfxDuration label

   Copy

   Text = "Hours: " & LookUp('Training Courses', ID = Dropdown1.Selected.ID, DurationHours)

   powerfxStart date label

   Copy

   Text = "Starts: " & Text(LookUp('Training Courses', ID = Dropdown1.Selected.ID, StartDate), "mm/dd/yyyy")

Auto‑Height Description Label

Instead of guessing a fixed height for the description, set it to grow automatically.

1. Insert a new label inside the container and call it lblDescription.

2. Set its Text property:

   powerfxDescription text

   Copy

   Text = LookUp('Training Courses', ID = Dropdown1.Selected.ID, Description)

3. Under Properties, set AutoHeight to true.

Now the label will expand to show the full description, and the container will grow the scrollable area accordingly. If the description is short, the label takes up only the needed space; if it’s long, the scrollbar appears.

Auto‑Height Gallery for Topics

Because the Topics column can hold between one and four selections, we need a gallery that shrinks or grows to fit exactly.

1. Insert a Label above the gallery with Text = "Topics".

2. Insert a Vertical gallery inside the container.

3. Set the gallery’s Items property:

   powerfxGallery items

   Copy

   Items = LookUp('Training Courses', ID = Dropdown1.Selected.ID, Topics)

   When a multi‑select choice column is used as a table, each selected value becomes a row with a Value field.

4. Inside the gallery, insert a label and set its Text to ThisItem.Value.

5. Style the gallery: set its Fill to RGBA(237, 237, 237, 1) and the label’s Fill to White to create a clean table appearance.

6. Now set the gallery’s Height property to automatically calculate the correct height based on the number of rows:

   powerfxDynamic gallery height

   Copy

   With(
   {numRows: CountRows(LookUp('Training Courses', ID = Dropdown1.Selected.ID, Topics))},
   TemplateHeight * numRows + TemplatePadding * (numRows - 1)
   )

   Replace TemplateHeight and TemplatePadding with the values you set on the gallery’s properties (e.g., 52 and 5). The formula multiplies the row count by the template height and adds the top margin for the first row plus padding between rows.

Step 4: Reset the Scrollbar When Navigating Between Courses

When a user selects a different course from the dropdown, the content updates but the scrollbar might stay in its previous position. To force the scrollable container to jump back to the top, use a quick UI trick.

1. Insert a Timer control somewhere outside the container (e.g., behind the header). Set its Duration to 1 (millisecond) and AutoStart to false.

2. Add a small invisible Label inside the container (you can set its Visible property to false initially). This label will be toggled by the timer to cause a reflow.

3. Set the dropdown’s OnChange to start the timer:

   powerfxDropdown onChange

   Copy

   Timer1.Start()

4. Set the timer’s OnTimerEnd to briefly make the hidden label visible and then hide it again:

   powerfxTimer OnTimerEnd

   Copy

   UpdateContext({ctxToggle: true});
   UpdateContext({ctxToggle: false})

   Then bind the hidden label’s Visible property to ctxToggle. Because the label exists inside the container, flipping its visibility causes the container to recalculate its scroll position, effectively resetting it to the top.

   This approach is safe, fast, and doesn’t require complex formulas.

   Pro Tip

   You can also combine this with a variable that resets other UX elements. The key is to change a property of a control inside the container so that the container re‑renders its scroll state.

Performance & Delegation Notes

• LookUp with the ID column is a delegable operation, so it works well even with large SharePoint lists.

• If your list contains several thousand courses, consider limiting the dropdown’s items with a Filter to avoid loading everything. For example, show only active courses:

  powerfxFilter dropdown items

  Copy

  Items = Filter('Training Courses', Status = "Active")

• The dynamic gallery height formula triggers a recalculation whenever the selected course changes. Because it uses CountRows on the same LookUp, it may cause an extra data request. For small lists this is not an issue, but for high‑volume scenarios you could store the topic list in a variable once.

• Avoid placing heavy expressions (e.g., complex LookUp inside CountRows) in the Height property if performance becomes a concern. Benchmark with realistic data.

Common Mistakes and Troubleshooting

Final Recommendation

The vertical container with scroll overflow is the leanest way to build a custom scrollable screen in Power Apps. It works for forms, dashboards, and any layout where the content length is unpredictable. Combine it with auto‑height labels and calculated gallery dimensions to create an interface that adjusts automatically to your data.

Start with a simple prototype—insert a container, add a few controls, and toggle VerticalOverflow—and you’ll see how fast you can replace a complex workaround with a clean, responsive solution.

References

• Matthew Devaney, Easy Power Apps Scrollable Screen Using A Vertical Container (original inspiration): https://www.matthewdevaney.com/easy-power-apps-scrollable-screen-using-a-vertical-container/
• Microsoft Learn – Understand containers in Power Apps: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/add-containers