Todd Baginski's Blog - A SharePoint, Mobile, Office365, PowerApps and Azure Blog

HOW TO: Make PowerApps Fill The Entire Screen

26 June 2018


 June 26, 2018

Ever since the Onboarding Tasks and Meeting Capture PowerApps sample templates were released people have asked me, ‘How did you get the PowerApps to fill the entire web browser and look good?’.

It’s actually quite simple.  🙂

Let’s use the Meeting Capture PowerApps sample template as an example.

When you download the Meeting Capture PowerApps sample template, you will notice it fills the entire web browser, like this:

To enable this behavior, go to App Settings in the PowerApps editor, then select Screen size + orientation.  Then, in the Advanced settings section, turn Off Lock aspect ratio.  Just like this:

If you turn On Lock aspect ratio, the Meeting Capture PowerApps sample template will look like this.

You can learn more about the screen size and orientation settings here.

One thing you need to be careful about when you turn Off Lock aspect ratio is how you position your controls. Absolute positioning for all of your controls will not work well.  Instead, you will need to use relative positioning for your controls to ensure they stretch and move well to fill the entire web browser without overlapping each other, or looking all wonky.

Here is an example (shown below) that demonstrates how you can set a relative position for controls in PowerApps.  In this example, the Y coordinate is 20 pixels more than the bottom of the control that appears above it in the screen.

Be careful how you edit!  If you move controls on the design surface with your mouse or arrow keys any code you wrote to relatively position them will disappear and the X and Y coordinates will become fixed.

2 responses on “HOW TO: Make PowerApps Fill The Entire Screen

  1. James Milne says:

    Hi Todd,
    It would be great if we could detect the current orientation of the App. I’m thinking we might be able to use formulas to change the layouts of the controls to take up the additional screen realesate. Any ideas on how we could detect the current orientation?

    • Todd Baginski says:

      Hi James,

      I agree, that would be sweet. Right now you can’t detect it. The best you can do right now is to use relative position between your controls to implement a ‘pseudo-responsive’ layout.