cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Marqiux
Helper I
Helper I

Black Box appears when Form is Embedded in a Page using Chrome

All of our forms are embedded within site pages.

All of a sudden, users are seeing a black box typically at the bottom of the form when using Chrome.
Does anyone know what the root cause is and how to fix it? 
This was working fine a few weeks ago? Nothing was changed or updated on the forms - What gives??


If I zoom out the browser to say 90%, 80% or so, then the black box goes away... 
We've made sure the form settings (size matches the size of the form panels)

This works well with FireFox and Edge... IE the behavior is sporadic.

10 REPLIES 10
cchannon
Super User
Super User

Looks like the frame in which you have embedded your app is taller than your app.

 

PowerApps by default locks the aspect ratio of your apps, so if the canvas on which you've dropped it is of different proportions than the app itself, you'll wind up with bars at top, bottom, or sides, depending on how the fit is. Most likely, the issue is that the panel is bigger than the browser scales for by default, so the poweapp gets squished at the sides, which causes it to scale down, which leaves you with the black box. When you zoom out, you open more space at the sides, which gives the app room to rescale and fill the available vertical space.

 

I do have good news though:

  • The PowerApps team is working right now on bringing us Liquid sizing that will allow you to dynamically control the sizing and layout of your app components to always fill the available space appropriately
  • Until they do, the following fix might work for you (although it can cause some distortion of app element sizing, so test it before you push it to prod!)
    • Open your app in Edit mode and go to File --> Settings --> Screen Size + Orientation
    • Set Scale To Fit to OFF. This will prevent the app from resizing and creating that black box, but it will also turn off locking the aspect ratio, so as always: TEST TEST TEST - depending on what is in your app, the distortion might be totally unnoticeable, or it could cause it to look like complete garbage. Make sure you know which it will be!

Hello cchannon, 

Thank you for replying 🙂

I don't seem to have the "Scale To Fit" feature in my view....  See attached screen shot.

It's also not in Advance Settings, unless is called something else...

Thanks again

There should be an "Advanced Settings" section right underneath those resolution settings (not the one in the left nav). Your screenshot is clipped on the right side; is there a scrollbar that would let you go down maybe?

@cchannon I took additional screen shots, please take a look.

Enigmike
New Member

We're seeing the same issue with PowerApps forms embedded in SharePoint pages on Chrome. Turning "Scale to Fit" off doesn't have any impact.

 

Seems to have started happening with the latest Chrome version update.

 

Is anyone else affected by this?  

richdiMSFT
Power Apps
Power Apps

Hi Marqiux,

 

Thanks for reporting the issue. It seems that with a recent change between Power Apps and the chromium rendering engine some embedded scenarios will show a black box. Most prevalent when scrolling to down a part of the bottom of the app will get a black box overlay. We are researching the issue to try and find a fix. 

 

Sorry for the pain,

Rich Dickinson

PM Power Apps 

@richdiMSFT ,

Thank you so much - I'll await for your response

this is the same issue I posted in this link. I hope Microsoft fix this as soon as possible. https://powerusers.microsoft.com/t5/Building-Power-Apps/Black-screen-appearing-when-scrolling-down-t...

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.

Users online (1,280)