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.

 

 

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.

 

 

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

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

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Top Kudoed Authors
Users Online
Currently online: 61 members 4,907 guests
Please welcome our newest community members: