Preview Mode not centered when resizing horizontally

[Anonymous]

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.

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.

[v-jefferni · Accepted solution]

Hi @Anonymous ,

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.

[Anonymous]

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.

[Anonymous]

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]

@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.

[adedapo]

Has there been a solution to this yet?

[adedapo]

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.