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

[doshort]

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!

[Power_Robert]

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!

[doshort · Accepted solution]

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.