Rajeev Pentyala – Microsoft Power Platform

Let’s say you have a canvas app screen with two containers as shown below. Initially, both containers’ heights were set to 500 px, so they both fit into the screen.

Now lets make the ‘Container1’ height to 1000 px.

As you notice, ‘Container 1’ has taken up the entire screen, while ‘Container 2’ is missing.

Now, how do we get ‘Container 2’? If we bring the scroll bars to the screen, we could see both ‘Container 1’ and ‘Container 2’. In this article, let’s see how to build a scrollable screen.

I am going to explain two approaches to achieve scrollable screens.

Use Vertical Container:

• Add a new Vertical Container to the screen and set it’s X, Y, Width and Height properties. Also move the ‘Container1’ and ‘Container2’ inside the Vertical Container, as shown below.

• Next, select the ‘vertical container’ and set the Vertical Overflow = Scroll

• You will notice that the scroll bars have been added to the screen.

• Play the App, and you should see the scroll bar in action.

Now that you understand how to create a scrollable screen using the vertical container, let’s explore the second option.

Using ‘Scrollable’ screen template:

We can also achieve a scrollable screen using the Scrollable screen template.

• Add Screen > Scrollable and then add sections as shown below.
• Play the app and you will notice the screen with scroll bar.

That’s it for this blog. I hope you understand how to build scrollable screens in Canvas apps.

🙂