After reading this article, you will learn how to choose the appropriate orientation or custom size for your embedded PowerApps application.

Prerequisites

1. You have already added the PowerApps ShortPoint Element on your Page. Please follow this article to find out how to add your first PowerApps application to SharePoint.

STEP 1: Detect the Orientation of Your PowerApps Application

Sign-in to PowerApps Portal and select the application you want to embed into the SharePoint page using ShortPoint. Click Edit from the dropdown action menu of your application:

Go to the setting page of your application and click Screen size + orientation:

STEP 2: Select the Display Option in Your PowerApps Design Element

First, make sure you add your PowerApps element into the appropriate column size. PowerApps are designed to work best with fixed sizes. For page layout purposes, apps that use a portrait orientation usually fit well in one-third of the three-column layout. Apps that use a landscape orientation usually fit well in wide column layouts like one-column, 2/3 or 3/4.

The Invoices PowerApps example from this tutorial has a landscape orientation: 

STEP 3: Select a Custom Size to Align the Embedded App with the Content from Your Page

In case the default Display Options (Portrait or Landscape) does not align your content as you wish, you should use a custom size to embed your app.  For instance, if you want to align the height of your app with the content of a sibling element, detect the required height and calculate the corresponding width for your PowerApps Element. 

Make sure you respect the aspect ratio, otherwise you will see a gray background area around your app:

• Portrait (9:16) - e.g. for a height of 410px, the corresponding width would be: (410*9 )/16 = 230.62px
• Landscape (16:9) - e.g. for a height of  410px, the corresponding width would be (410*16)/9 = 728.99px

Open the developer tools (F12) and select the sibling element. Go to the Computed tab, from the top-right side of your developer tools window and identify the height of the element:

Edit the ShortPoint Web Part and configure your PowerApps element. Select Custom Size, from the Settings tab and insert the height and the calculated width. Click Update and Save Web Part. Now the embedded PowerApps application will be aligned with the sibling element.

Note: If you need to embed the application with a specific width, you can calculate the height in the same manner:

• Portrait (9:16) : Height = (Width*16)/9
• Landscape (16:9) : Height = (Width*9)/16

That's it!

Related articles:

• Adding Your First PowerApps Application to SharePoint 

• How to Pass Dynamic Parameters to PowerApps From ShortPoint
• How to Change PowerApps Loading Icon and Color
• Embed PowerApps on SharePoint On-Premises and SharePoint Online (cross-tenant)