CODEWITHSUNDEEP
powerbi-embedded
sa-
sa-

Reputation: 21

How to get rid of the grey margins when report container ratio size changes

We are working on embedding a power bi report using power bi embedded js library. Our current report in power bi service is saved under a specific dimension, lets say 16:9, therefore my container size should respect the same ratio to avoid having the grey void in the margins. The problem is that we have a feature thats enables the container size modification, thus, in case of sizes different from the ratio specified earlier in the report the grey margins appear.

My question is, is there any way to let the power bi service handle the responsivness of the report ? or should we manipulate the css of the page ? or should I update the report with a new embedding config (if yes which one) ?

Grey Margin

Upvotes: 2

Views: 749

Answers (3)

Marc Youcef
Marc Youcef

Reputation: 69

I edited my answer according to last updates from documentation here regarding report embedding. The PageView mode have been removed from report embedding configuration settings and the one used is now the setting under which the report itself is saved under power bi service or power bi desktop after being published: Power BI Service:

enter image description here

Power BI Desktop: Same as above

Your report is going to be embedded depending on the setting it was saved under. I would recommend fitToWidth and calculate the container height according to the aspect ratio of the report.

Upvotes: 0

mayur_007X
mayur_007X

Reputation: 784

No, there is no way to change the report-page size dynamically at the time of embedding. Possible workaround can be changing the report container size dynamically using the report-page sizes on report rendered event as the report will be rendered each time the report-page is changed. Example:

report.on("rendered", function (event) {
   report.getPages()
      .then(function (pages) {
         for (i = 0; i < pages.length; i++) {
            if(pages[i].isActive)
            {
               $("#report-container").width($("#report-container").height()*(pages[i].defaultSize.width/pages[i].defaultSize.height));
               break;
            }
         }
      });
   report.off("rendered");
});

Upvotes: 2

Amit Shuster
Amit Shuster

Reputation: 169

Power BI is responsive, when changing the report size it will re-render. In order to handle the grey margins, consider using a transparent background.

You can find the documentation here (search for "Transparent Background"): https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details

Upvotes: 0

Related Questions