'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Remove White Edges Around a Power App Embedded in SharePoint
Question details
The user wants to eliminate the white space that appears on the left and right sides of a Power App when it is integrated into a SharePoint site.
- Product
- Microsoft Power Apps and SharePoint
- Device & OS
- not provided
- Scenario
- Embedding a completed Power App into a SharePoint page to share with other users.
- Observed behavior
- The Power App displays seamlessly without borders when opened directly in a standalone view, but shows unwanted white edges on the sides when placed inside a SharePoint page container.
Before adjusting your app's layout, ensure you have the necessary edit permissions for both the Power App in Power Apps Studio and the target SharePoint page where it will be embedded.
Adjust Responsive Sizing and Aspect Ratio in Power Apps
Modify the display settings within Power Apps to ensure the application scales correctly without leaving blank margins inside the SharePoint iframe.
Navigate to make.powerapps.com, select your application, and click 'Edit' to open it in the Power Apps Studio interface.
Click on 'Settings' from the top menu, then navigate to the 'Display' tab on the left sidebar to view your layout options.
Turn off the 'Scale to fit' toggle to make the app responsive, or adjust the aspect ratio to better match the dimensions of the SharePoint page container. Save and republish your app.
Consult the Power Platform Community
If standard display adjustments do not resolve the specific iframe behavior on SharePoint, seek specialized advice from the official Microsoft forums.
Boost Your Productivity with WPS Office
While resolving SharePoint embedding issues requires diving into specific Microsoft platform configurations, managing your daily documents, spreadsheets, and presentations doesn't have to be complicated. WPS Office provides a highly compatible, free alternative for your core office tasks.
- 1. Download the Software: Visit the official WPS website and click the download button to get the free installer for your operating system.
- 2. Install WPS Office: Run the downloaded installation file and follow the quick on-screen instructions to set up the office suite.
- 3. Open and Create: Launch WPS Office and click 'New' to start working on your documents, spreadsheets, or presentations immediately.
Frequently Asked Questions
Why does my Power App look different in SharePoint than in the preview?
SharePoint embeds the Power App using an iframe with predefined container dimensions. If your app's aspect ratio does not perfectly match the iframe's dimensions, the system will add white borders (letterboxing) to fill the empty space and maintain the app's original proportions.
How can I change the web part size in SharePoint?
While editing your SharePoint page, click on the Power Apps web part and open its property pane by clicking the pencil icon. From here, you can often toggle between standard size options or adjust the page section layout to better accommodate the app's dimensions.
Can I force a Canvas app to stretch and fill the white space dynamically?
Yes. By turning off both 'Lock aspect ratio' and 'Scale to fit' in your Power Apps Display settings, your Canvas app becomes responsive. However, you will also need to configure the internal controls and formulas to anchor dynamically to the edges of the screen.
