Power BI embedded adding 10px top margin when resizing screen

[Anonymous]

A bug has been found where a 10px top margin is added to the power bi embedded visual, when you minimize the browser window and then maximise it again.

We are setting the visual to a custom size using the following settings:

let settings = <pbi.models.ISettings>{

      layoutType: pbi.models.LayoutType.Custom,

      customLayout: {

        displayOption: pbi.models.DisplayOption.ActualSize,

        pageSize: {

           height: 643,

           type: pbi.models.PageSizeType.Custom,

           width: 1192

        }

      },

      panes: {

        bookmarks: {

          visible: false

        },

        fields: {

          expanded: false,

          visible: false

        },

        filters: {

          expanded: false,

          visible: false

        },

        pageNavigation: {

          visible: false

        },

        selection: {

          visible: false

        },

        syncSlicers: {

          visible: false

        },

        visualizations: {

          expanded: false,

          visible: false

        }

      },

      bars: {

        actionBar: {

          visible: false

        }

      },

      background: pbi.models.BackgroundType.Transparent,

      localeSettings: {

        formatLocale: "en-US",

        language: "en"

      }

    }   

This is applied to the report and the visual fits perfectly at first. If you minimize the window, the margins within the iframe still look good, but then when you maximise back to full screen, there is an extra 10px added to the top margin of the visual. It is div class="displayArea" within the iframe and has element style including 10px top margin.

Please can this be fixed?

Thank you

[Anonymous]

Something similar reported by someone else:

https://community.powerbi.com/t5/Developer/Embedded-report-adding-an-unwanted-10px-top-margin-to-my-...

[v-chuncz-msft]

@Anonymous 

I tried https://playground.powerbi.com/ and it seems to work fine. Try to upgrade browser version, clear cache and also adjust height property.

[Anonymous]

@v-chuncz-msft 

Thanks for looking into this. I've tried in the playground, here is the code I used:

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    /*-----------------------------------------------------------------------------------+
    |    Don't change these values here: access token, embed URL and report ID.          | 
    |    To make changes to these values:                                                | 
    |    1. Save any other code changes to a text editor, as these will be lost.         |
    |    2. Select 'Start over' from the ribbon.                                         |
    |    3. Select a report or use an embed token.                                       |
    +-----------------------------------------------------------------------------------*/
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            }
        }
    };

    // Get a reference to the embedded report HTML element
    let embedContainer = $('#embedContainer')[0];

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

try {
    const pageName = "Authoring page";
    if (authoringPage) {
        console.log(pageName + " already exists.")
        await authoringPage.setActive();
        return;
    }

    // Adds a new page for the authoring APIs
    window.authoringPage = await report.addPage(pageName);
    console.log("A new page for the authoring APIs was created, next step would be to use the 'Create a visual' API");
} catch (errors) {
    console.log(errors);
}
if (!authoringPage) {
    console.log("Authoring page is undefined. Please run 'Create an authoring page' first.");
} else {
    // Creating new visual
    // For more information about report authoring, see https://go.microsoft.com/fwlink/?linkid=2153366
    try {
        await authoringPage.setActive();
        const response = await authoringPage.createVisual('table');
        window.lastCreatedVisual = response.visual;

        //Defining data fields
        const billingVendorIdColumn = { column: 'BillingVendorID', table: 'Inventory' };

        //Adding visual data fields
        lastCreatedVisual.addDataField('Values', billingVendorIdColumn);
    }
    catch (errors) {
        console.log(errors);
    }
}


//New settings to hide all the visual headers in the report
const newSettings = {
    layoutType: LayoutType.Custom,
    customLayout: {

        displayOption: DisplayOption.ActualSize,

        pageSize: {

           height: 643,

           type: PageSizeType.Custom,

           width: 1192

        }
    },
    panes: {

        bookmarks: {

          visible: false

        },

        fields: {

          expanded: false,

          visible: false

        },

        filters: {

          expanded: false,

          visible: false

        },

        pageNavigation: {

          visible: false

        },

        selection: {

          visible: false

        },

        syncSlicers: {

          visible: false

        },

        visualizations: {

          expanded: false,

          visible: false

        }

      },
      bars: {

        actionBar: {

          visible: false

        }

      },
      background: BackgroundType.Transparent,

      localeSettings: {

        formatLocale: "en-US",

        language: "en"

      },
    visualSettings: {
        visualHeaders: [
            {
                settings: {
                    visible: false
                }
                // No selector - Hide visual header for all the visuals in the report
            }
        ]
    }
};

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(newSettings);
    console.log("New settings applied");
}
catch (error) {
    console.log(error);
}

The playground is ignoring the setting:

displayOption: DisplayOption.ActualSize

<div _ngcontent-vfl-c314="" container-printer="" print-container-selector="displayArea" class="displayArea disableAnimations fitToPage" style="box-shadow: rgba(200, 200, 200, 0) 0px 0px 10px; outline: none; height: 505.688px; width: 899px; position: absolute; left: 0px; top: 0px;">

whereas on mine, the same div looks like this:

<div _ngcontent-mjq-c314="" container-printer="" print-container-selector="displayArea" class="displayArea disableAnimations actualSizeAlignCenter actualSizeAlignMiddle actualSizeCentered" style="box-shadow: rgba(200, 200, 200, 0) 0px 0px 10px; outline: none; position: absolute; height: 453px; width: 702px; left: 0px; top: 10px;">

So if you look at the classes in each, it looks like the playground is overriding the setting:

displayOption: DisplayOption.ActualSize,

and instead using:

displayOption: DisplayOption.FitToPage,

you can also see this by changing the size and observing the visual "fitting to the page" instead of staying the same size. You can also see this by observing in the div's I've pasted in above, height and width are not what they should be in the playground, but they are in mine.

I hope this all makes sense

Thank you

Colin