cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PalmTree83
New Member

Preview Mode not centered when resizing horizontally

When I try to preview my Power App it won't center once I make the browser window narrow. There's a certain point that this behavior starts, I believe at 860 px width in the browser window. The app is shifted to the right, and goes further to the right the more I reduce the window width.

PalmTree83_0-1629231131569.png

I looked in the CSS for the animatedCanvasContainer and found that the min-width is 860. Not sure how I can remedy this. It's impeding my ability to simulate smaller size screens (i.e. phones). I've tried in Edge and Chrome with the same issue. I have multiple monitors, not sure if that has an impact.

PalmTree83_1-1629231543566.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
v-jefferni
Community Support
Community Support

Hi @PalmTree83 ,

 

In PowerApps studio preview mode, the App would not “Scale to fit” the screen for real. You will see that the grey area would always be there no matter how big the browser window is, even if you press F11 to make the browser in full screen mode. While playing the App, Scale to fit with Lock aspect ratio turned off would really take effect.

 

For now, I could not find a way to resolve this as it seems to be by design. You may try suggest an idea in the Idea Forum:

Power Apps Ideas - Power Platform Community

 

Hope this helps.

 

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

 

 

Community Support Team _ Jeffer Ni

If this post helps, then please consider Accept it as the solution to help the other members find it.

View solution in original post

6 REPLIES 6
v-jefferni
Community Support
Community Support

Hi @PalmTree83 ,

 

In PowerApps studio preview mode, the App would not “Scale to fit” the screen for real. You will see that the grey area would always be there no matter how big the browser window is, even if you press F11 to make the browser in full screen mode. While playing the App, Scale to fit with Lock aspect ratio turned off would really take effect.

 

For now, I could not find a way to resolve this as it seems to be by design. You may try suggest an idea in the Idea Forum:

Power Apps Ideas - Power Platform Community

 

Hope this helps.

 

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

 

 

Community Support Team _ Jeffer Ni

If this post helps, then please consider Accept it as the solution to help the other members find it.

Thanks for the help @v-jefferni. This being the case, do you know how a typical developer can test using different screen widths? It seems like there should be a way to drag from the side to change the width of the screen. I have visual elements in my app that change based on the screen width. I've seen some tutorial videos where they test this by dragging the side of their browser window, but as you can see mine won't work that way.

This did work correctly until a few months ago, but I didn't pay much attention. Now that I need to develop for small screens, I agree that it's quite annoying. Nice to know that it's not just my setup.

PeterFromDenver
Frequent Visitor

@v-jefferni  I'm having the same issue.  Following a video tutorial dated July 27, 2021 and I can't test mobile (small breakpoints) without publishing and testing on my phone.  The video is https://youtu.be/1o2L0DADzKQ?t=772 but when I do that, my screen looks like the Original Post's screen shot. Something updated in the recent months with PowerApps maker because I get the same effect using Edge and Chrome.

Has there been a solution to this yet?

adedapo
Helper I
Helper I

For what it's worth, I have been able to discover a workaround (albeit a painful one) where one can view the resized app fully.

Steps:

  1. Preview the app in the studio
  2. make sure the Window size is selected (it's usually the default)
  3. Activate the inspect element mode of your browser
  4. Toggle Device emulation (Chrome MS Edge) or your browser's equivalent
  5. Use Ctrl + F to find and element with a class of "animated-canvas-centering-box"
  6. Once this element is brought in focus, your app should align properly

However once you start to resize, the app will be misaligned again; so just tap enter on the find bar of the inspect element window to realign.

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Users online (3,009)