SOLVED

Sizing the iFrame or PowerApp canvas in Modern Sharepoint web part

%3CLINGO-SUB%20id%3D%22lingo-sub-813504%22%20slang%3D%22en-US%22%3ESizing%20the%20iFrame%20or%20PowerApp%20canvas%20in%20Modern%20Sharepoint%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-813504%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20in%20the%20process%20of%20replacing%20our%20InfoPath%202010%20forms%20with%20PowerApps%20and%20really%20am%20enjoying%20the%20experience!%20I%20was%20hoping%20someone%20out%20there%20could%20help%20me%20determine%20the%20best%20way%20to%20size%20a%20PowerApp%20that%20is%20embedded%20in%20a%20Modern%20SharePoint%20site.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHas%20anyone%20done%20this%20or%20know%20the%20correct%20size%20an%20app%20(Portrait)%20would%20need%20to%20be%20so%20that%20the%20grey%20canvas%20background%20does%20not%20show%20up%3F%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F127671i72EF3AC7A535AB85%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22embed-powerapp-size.PNG%22%20title%3D%22embed-powerapp-size.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-813504%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPowerApps%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-813603%22%20slang%3D%22en-US%22%3ERe%3A%20Sizing%20the%20iFrame%20or%20PowerApp%20canvas%20in%20Modern%20Sharepoint%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-813603%22%20slang%3D%22en-US%22%3EIf%20you%20want%20portrait%2C%20there%20is%20a%20setting%20for%20the%20app%20in%20PowerApps%20to%20mark%20it%20as%20used%20for%20embedding%2C%20this%20changes%20the%20background%20to%20white%20so%20removes%20your%20grey.%3CBR%20%2F%3EIf%20you%20use%20the%20standard%20landscape%20size%20with%20the%20same%20setting%2C%20in%20full%20width%20sections%20you%20can%20resize%20it%20when%20you%20edit%20the%20page%20to%20go%20to%20the%20edge%20of%20the%20section.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-822757%22%20slang%3D%22en-US%22%3ERe%3A%20Sizing%20the%20iFrame%20or%20PowerApp%20canvas%20in%20Modern%20Sharepoint%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-822757%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F180%22%20target%3D%22_blank%22%3E%40Alan%20Marshall%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EI%20removed%20the%20grey%20background%20and%20pushed%20to%20the%20top%20left%2C%20but%20am%20still%20unable%20to%20size%20the%20SharePoint%20web%20part%20properly.%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20PowerApp%20is%20375%20x%20700%2C%20and%20I'm%20using%20a%201-Third%20column%20layout.%20The%20SharePoint%20web%20part%20doesn't%20allow%20me%20to%20resize%20the%20canvas%20of%20the%20app%20and%20make%20it%20appear%20full%20as%20it%20should.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20a%20screenshot%20of%20what%20it%20looks%20like.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F128526i80328FE4164C72FE%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Sharepoint-Column-Sizing.PNG%22%20title%3D%22Sharepoint-Column-Sizing.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-822844%22%20slang%3D%22en-US%22%3ERe%3A%20Sizing%20the%20iFrame%20or%20PowerApp%20canvas%20in%20Modern%20Sharepoint%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-822844%22%20slang%3D%22en-US%22%3E%3CP%3EI%20reloaded%20the%20SharePoint%20page%20and%20then%20was%20allowed%20to%20edit%20the%20size%20of%20the%20PowerApp%20canvas.%20Seems%20all%20is%20well!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20community!%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

I am in the process of replacing our InfoPath 2010 forms with PowerApps and really am enjoying the experience! I was hoping someone out there could help me determine the best way to size a PowerApp that is embedded in a Modern SharePoint site. 

 

Has anyone done this or know the correct size an app (Portrait) would need to be so that the grey canvas background does not show up?

embed-powerapp-size.PNG

 

3 Replies
best response confirmed by Brandon McGinnis (Contributor)
Solution
If you want portrait, there is a setting for the app in PowerApps to mark it as used for embedding, this changes the background to white so removes your grey.
If you use the standard landscape size with the same setting, in full width sections you can resize it when you edit the page to go to the edge of the section.

Thank you @Alan Marshall

I removed the grey background and pushed to the top left, but am still unable to size the SharePoint web part properly.

The PowerApp is 375 x 700, and I'm using a 1-Third column layout. The SharePoint web part doesn't allow me to resize the canvas of the app and make it appear full as it should.

 

Here is a screenshot of what it looks like.

 

Sharepoint-Column-Sizing.PNG

 

I reloaded the SharePoint page and then was allowed to edit the size of the PowerApp canvas. Seems all is well!

 

Thanks community!