cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
JWright-NewSig
Level: Powered On

Disabling 'Scale to Fit' to enable responsive design breaks my apps

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):

Annotation 2019-04-05 173603.jpg

 

Here are the results:

  1. In Edge:
    • Annotation 2019-04-05 171808.jpg
    • 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.
  2. In Chrome 
    • Annotation 2019-04-05 173456.jpg
    • 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.
  3. 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
  4. 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.

1 ACCEPTED SOLUTION

Accepted Solutions
JWright-NewSig
Level: Powered On

Re: Disabling 'Scale to Fit' to enable responsive design breaks my apps

It looks like microsoft may have fixed this bug with an update that they released last week. They also added some new functionality for responsive design.

https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/

 

Its important to note that Phone apps have more pixels than Tablet/Desktop/Web. Which is where I think our issue came from. The app wasnt differentiating between a desktop and a phone, so it just showed us the phone pixel density.

 

 

View solution in original post

3 REPLIES 3
h-nagao
Level 10

Re: Disabling 'Scale to Fit' to enable responsive design breaks my apps

Hi,
I have same issue and I’ve asked Microsoft support, their answer was it is limitation at present:-(
And support rise an idea https://powerusers.microsoft.com/t5/PowerApps-Ideas/Responsive-layout-app-on-a-PC-Twice-the-width-an...
Pls vote this to improve this “limitation”
JWright-NewSig
Level: Powered On

Re: Disabling 'Scale to Fit' to enable responsive design breaks my apps

Voted!

 

I'm not sure how this could get pushed through testing when it's so broken in Edge and Windows Store App. I'm also suprised that it isn't marked as "Experimental" since there are pretty serious 'limitations' that are known.

 

My responsive apps are on hold this this gets solved, unfortunately.

JWright-NewSig
Level: Powered On

Re: Disabling 'Scale to Fit' to enable responsive design breaks my apps

It looks like microsoft may have fixed this bug with an update that they released last week. They also added some new functionality for responsive design.

https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/

 

Its important to note that Phone apps have more pixels than Tablet/Desktop/Web. Which is where I think our issue came from. The app wasnt differentiating between a desktop and a phone, so it just showed us the phone pixel density.

 

 

View solution in original post

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 476 members 6,133 guests
Please welcome our newest community members: