I'm trying to get my Canvas App to be responsive and reflow depending on the device, browser or iframe dimensionsthat is using the app is running on. When I started this, I expected that I would be able to controll the View Port There are a number of issues that im running into in getting this to work. Hopefully someone can help me out with these.
For reference, Im following the instructions here: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout
I created a test Application to see where things are falling apart. The Dimensions are set to the Default 16:9, or 768x1366. I placed some labels on the page to show the App Width/Height, the AppDesign Width/Height and the Parent(Screen) Width/Height. I also placed a Gallery Control on the page and set it's height to "Parent.Height" so that it would fill the height of the frame that. I made sure that 'Scale to Fit' was disabled and published the app.
In the Designer it looks like this (in Chrome):
Here are the results:
- In Edge:
- App Height and Width are 3489 and 1661
- The App Design is 1366 x 768
- The Parent(Screen) is 3489 x 1661
- I get scroll bars that lead to nothing, both virticially and horrizontally
- The Gallery only goes to half way down the page (If I scroll Virtically)
- Everything looks really small in comparrison to the designer at 100%
- If I shrink the Window, the Parent(Screen) dimensions change along with the app dimensions, but the Gallery that is uses "Parent.Height" allways extends to below the bottom of the screen.
- I tested this in an iFrame too, the iframe had dimensions of 1366 x 2000 and the app dispalyed 3489 X 3999 with Scroll bars in the iframe.
- If I set my browser Zoom level to 200% everything in the app looks okay, but I still have scroll bars.
- In Chrome
- App Height and Width are 3839 and 1841
- The App Design is 1366 x 768
- The Parent(Screen) is 3839 x 1841
- No Scroll Bars that Lead to nothing (So better than Edge) - Everything actually appears to fit on the page
- Everything still looks really small on the page, like the pixels all doubled or something.
- Tested in an iFrame and there were no scroll bars, but still very small content.
- If I set the browser to 200% zoom, everything looks fine and works as expected.
- in iPhone App
- App Height and Width are 1472x 828
- The App Design is 1366 x 768
- The Parent(Screen) is 1472 x 828
- Everything appears to look corret
- Windows App
- Exaclty the same experience as Edge, Scroll bars and all.
Im assuming that this isnt desired and theres just a really big glaring bug with the disabling 'Scale to Fit' where the pixels all double, and Edge goes haywire.
Is this a known issue that will be fixed or am I just missing something? I'm wondering what the expected behaviour is as the 'Scale to Fit' functionality is a bit useless inless youre only using the app on an iPhone.
