cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
doshort
Frequent Visitor

Canvas app only appears without scrollbars if Chrome browser is in full screen mode (F11)

Hi -

 

I am trying to build a responsive canvas app, and I have just about everything worked out. However, when I launch the app in a browser window, it adds scroll bars on the right and bottom unless I press F11 to put the browser in full screen mode, in which case the scrollbars go away (unless the right side scrollbar is needed for the form or gallery). It appears that the app screen does not fit in the window vertically because of the browser tabs at the top, and the inclusion of the scrollbar on the right causes the app to not fit into the width of the screen.

 

The app orientation is set to landscape, the size is 16:9 (which results in a screen size of 1366x768). Scale to fit, lock aspect ratio, and lock orientation are all off. The screen height is set to Max(App.Height, App.DesignHeight) and the screen width is set to Max(App.Width, App.DesignWidth). All forms and galleries refer to Parent.Height and Parent.Width.

 

Am I missing something to automatically have the app fit in a browser window that is not in fullscreen mode?

 

Thanks for your help!

1 ACCEPTED SOLUTION

Accepted Solutions

I figured it out. The minimum dimensions App.DesignWidth and App.DesignHeight use the dimensions selected in the Screen size + orientation settings. Since the app height was set as the Max between screen height and App.DesignHeight, any time the screen height was less than the App.DesignHeight the vertical scrollbar appeared which caused the horizontal scrollbar to appear. This happened when the browser tabs took up part of the screen real estate as detected by the app.

 

I set the height to Max(App.Height, 400), which means any time the window size is greater than 400, the scrollbars do not appear. This is OK because the forms and galleries I use have scrollbars tha are accounted for in the app.

View solution in original post

2 REPLIES 2
Power_Robert
Helper II
Helper II

Hi @doshort,

 

I am pretty new to the responsive app as well. But what I have learned so far is that you need to keep your dimensions as dynamic as possible to make it "flow" with the real estate of the browser used.

 

Running an app in the Power Apps App from the Microsoft Store will give you a bit more real estate as well. Not sure how well it performs in general:

https://www.microsoft.com/en-us/p/power-apps/9nblggh5z8f3?activetab=pivot:overviewtab

 

 

You might have already read this:

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

 

This one might be helpful as well:

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

 

Good luck!

 

I figured it out. The minimum dimensions App.DesignWidth and App.DesignHeight use the dimensions selected in the Screen size + orientation settings. Since the app height was set as the Max between screen height and App.DesignHeight, any time the screen height was less than the App.DesignHeight the vertical scrollbar appeared which caused the horizontal scrollbar to appear. This happened when the browser tabs took up part of the screen real estate as detected by the app.

 

I set the height to Max(App.Height, 400), which means any time the window size is greater than 400, the scrollbars do not appear. This is OK because the forms and galleries I use have scrollbars tha are accounted for in the app.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (1,585)