Answered

How to show vertical scroll bar for responsive apps on landscape mode?

(0) Share

Report

Posted on by R58395

166

I am making a responsive power app. I would like it to appear correctly on mobile phone (with rotate mode), and desktop (PowerApp webpart on SP Online page). I have set it to

Mode - Tablet

Orientation - Landscape

Size - 4:3 iPad (this is so that I can maximize horizontal and vertical space on desktop)

Scale to fit - disabled

Lock aspect ratio - disabled

Lock orientation - disabled

What I noticed:

1. On mobile (portrait mode), it looks fine and I can scroll down on the gallery.

2. On mobile (landscape mode), the bottom part of the app gets cut off and I cannot scroll down.

3. On desktop (when width big enough), it looks fine and I can scroll down on the gallery.

4. On desktop (when width small enough), the bottom part of the app gets cut off and I cannot scroll down fully, through both scrollbars show. The canvas is always on 4:3 ratio and doesn't auto rotate to portrait.

How can I solve 2 and 4?

Edit - I noticed if I start from a Scrollable Screen Template, it comes with this fluid container component (circle with a question mark icon in it). Do I need to use that to resolve my problem?

Thanks

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (1)

Sort by

Verified answer

v-jefferni Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @R58395 ,

Please try and use the scrollable screen:

Copy all the controls into the new added scrollable screen, remove the header and see if this works.

Hope this helps.

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

Was this reply helpful? Yes No
R58395 166 on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks, I was able to get it to work by using that scrollable screen component.

@v-jefferni Question - In the powerapps webparts for embedding in SP Online pages, when the screen gets small enough, is there a way to dynamically change the app dimensions to look mobile (height bigger than width)? Currently, it is always showing the 4:3 ratio, and when the screen gets small enough, it shows scroll bars everywhere.

Was this reply helpful? Yes No
v-jefferni Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @R58395 ,

You can turn on the option Scale to fit, but this will cause the width of the controls to change with the width of the page, sometimes look ugly.

If you would like to create a totally responsible app, please refer to below doc:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

And here are some blogs for your reference:

https://lennartwoermer.de/2019/07/how-to-build-responsive-canvas-apps-power-apps/

https://www.valointranet.com/blog/deep-dive-adding-responsive-design-to-powerapps/

https://hatfullofdata.blog/power-apps-build-a-responsive-app-planning/

https://blog.sysfore.com/building-responsive-apps-using-power-apps-canvas/

Videos:

https://www.youtube.com/watch?v=GrtzAqqDgN8

https://www.youtube.com/watch?v=HIS36rspx6g

Hope this helps.

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

Was this reply helpful? Yes No
DynatechSystem 6 on at

Like
a
(0)

Report
Copy link

Link copied!

As a leading Microsoft Power Platform partner, Dynatech provides clients instant access to custom applications developed using the PowerApps platform. In addition, we provide our technical experts with assistance in designing custom apps, automating manual processes, and updating the existing apps to reflect your needs. By providing effective PowerApp solutions, we have the technical insight to help businesses find a way through the complexities of any project. We offer various services, from project planning and development to maintenance and audit services. Our commitment to you is to ensure your business's success throughout the entire process.

Was this reply helpful? Yes No
DynatechSystem 6 on at

Like
a
(0)

Report
Copy link

Link copied!

Mobile landscape and narrow desktop views cause cut-off sections. The author explores the "Scrollable Screen Template" for a fix. Dynamics 365 Marketing suggests leveraging responsive layouts and container properties for better control.

Was this reply helpful? Yes No