web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Massive white or grey ...
Power Apps
Suggested Answer

Massive white or grey space in embedded canvas app

(2) ShareShare
ReportReport
Posted on by Microsoft Employee

Issue: There is massive white or grey space when I use an embedded canvas app in model-driven Power Apps. I have fixed the height of the canvas app to 150px but the model driven app adds more than 1000px as height for the embedded canvas app, i have tired responsive as well as fixed both didnt work. I checked the backend code, it is contained in iframe which is fixing the minimum height of the embedded canvas app container to certain height. I want to resize the height. i have tired javascript and css but model driven app is overriding the changes which i made.

 

Analysis:

 

Microsoft recommends validating the following settings based on how the canvas app is designed:

If the canvas app is responsive

  1. Review the app’s display settings and test the behavior with Scale to fit enabled or disabled, as embedded canvas apps may render differently compared to standalone canvas apps.
  2. Avoid dynamically setting screen height based on parent or container values, as this can result in additional whitespace or scroll bars when embedded.

If the canvas app is non‑responsive (fixed size)

Enable Scale to fit so the app can scale proportionally within the available space on the model‑driven form.
 
  1. Ensure the App Name property is correctly set in the embedded canvas app control on the model‑driven form.
  2. Use a simple form layout (for example, a single‑column section) for the embedded canvas app to avoid layout recalculations that may increase the rendered height.
 
I have tired both responsive and fixed, but for both it keeps adding massive white space, which I have to scroll more than one screen of white space to get to the next section. I have set the height to 150px only. But still nothing worked. I forced all the control to specific height, but still model driven app is adding more white space. I have tried to create a classic view or a modern view. Outside of the classic view and connected directly to MDA, I gave the proper name and app ID. But nothing seems to be working.
Categories:
I have the same question (0)
  • Suggested answer
    Valantis Profile Picture
    6,735 on at
     

    based on what i have found throw MS docs this behavior is expected for embedded canvas apps in model-driven apps: the form field height is not respected. The rendered height is calculated from the canvas app’s aspect ratio and the available width on the form, which is why setting the height to 150px does not keep it at 150px. (Microsoft Learn)

    The recommended fix is to adjust the canvas app itself, not the model-driven container:

    • If the app is responsive, set Scale to fit = Off

    • If the app is nonresponsive/fixed size, set Scale to fit = On

    • Use Tablet layout and change the app to a wider / shorter custom aspect ratio, because that is what controls the embedded height

    • Save/publish the canvas app and then republish the model-driven app (Microsoft Learn)

    If the app still creates too much empty space, Microsoft recommends custom pages in most cases instead of embedded canvas apps, because custom pages provide more flexible layouts, more styling control, and better integration/performance. (Microsoft Learn)

     

    Best regards,

    Valantis

     

    ✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

    ❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

    🏷️ For follow-ups  @Valantis.

    📝 https://valantisond365.com/

     

  • Suggested answer
    11manish Profile Picture
    3,333 on at
    When a canvas app is embedded in a model-driven form:
    • The app is rendered inside an iframe
    • The Unified Interface layout engine calculates the height dynamically
    • The engine applies a minimum container height (~800–1200px)
    So even if your canvas app height is:
    150px

    The Model-Driven App section expands the iframe to avoid internal scrollbars.

    Because of this:
    • CSS changes are ignored
    • JavaScript changes are overwritten
    • iframe height is controlled by the platform
    So your attempts with JS/CSS will always be overridden.
     
    Solution 1: 
    • Open Model Driven Form Designer
    • Put the canvas app in a single column section
    • Set:
    • Section Layout → 1 column
    • Disable Auto Expand
    This sometimes reduces extra whitespace
     
    Solution 2: 
     
    Complex but reliable 
    • Use a PCF Control wrapper instead of Embedded Canvas App
    Solution 3: 
     
    Wraps the Canvas App UI inside a container with fixed height.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Valantis Profile Picture

Valantis 424

#2
WarrenBelz Profile Picture

WarrenBelz 355 Most Valuable Professional

#3
11manish Profile Picture

11manish 290

Last 30 days Overall leaderboard