Power Platform Community Forum Thread Details

Hi everyone,

I am facing an issue with an embedded Canvas App inside a Model-Driven App form.

In my scenario:

The Canvas App is embedded in a Model-Driven App form.
The App layout is set to Responsive.
Both Lock aspect ratio and Lock orientation are disabled.

However, I am seeing a lot of white space around the embedded Canvas App inside the Model-Driven App form.

Even though the Canvas App itself looks fine when previewed independently, when embedded:

Extra white space appears above/belowthe app
The layout does not fully utilize the available space
It does not resize properly according to the form section

Is there any solution for these kinds of issues?

Categories:

Power Apps Pro Dev & ISV

Building Power Apps

General topics

Hi @MH-24021008-0

The extra white space issue and improper resizing when placing a Canvas App inside a Model-Driven App form is a common scenario. This brings up challenge due to how the embedded app container handles sizing and responsiveness. Needs some inspection from different angle from responsiveness to accommodating canvass app inside the model driven app.

We can follow some best practices | Let's tweak:

1. Let's set all Label controls inside the Canvas App with AutoHeight=true. This will measure the content height dynamically. Then, set the Canvas App’s height property to match that label’s height. If there are extra white space vertically - will be removed.

2. Let's ensure the Canvas App uses responsive layout features (probably that's what you have done) and flexible height controls inside it.

3. An important one, if you didn't miss out -In the editor of Model-Driven App form, please check the section where the Canvas App is embedded. Set the section to use "Fit to Section" or adjust the number of columns and layout to better accommodate the Canvas App size. Probably this is called "Form Section Properties".

4. One more - please "Avoid Fixed Heights in Canvas App" as much as possible. Please do this by setting fixed heights on the Canvas App or its controls that might cause overflow or excessive white space.

5. Finally, do a omni-directional testing across different edge devices. white space issue varies between web, tablet, and phone clients!

I would suggest to spend some times here, please be very tenacious to achieve this.

To me - Microsoft documentation and community posts acknowledge that embedded Canvas Apps in Model-Driven forms can have sizing quirks, and full dynamic resizing is still evolving.

Please let me know if these tips help. Thank you.