Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
cyan
Helper I
Helper I

Fit to Page View, not adjusting to the height of the page when embedded

Hi everyone,

 

When setting power bi report's Page View to "Fit to Page" and embedding the report in our web app, the report doesn't fit the height of the page it only adjusts to the width, you can see this in Microsoft Power BI embedded sample by resizing your page and you will notice the empty grey space on the height of the iframe, https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

Is it possible that "Fit to Page" option actually allows the report to fit the page and not only the width, any suggestions for possible solution to this problem?

 

Thanks...

7 REPLIES 7
Anonymous
Not applicable

@cyan did you solve this issue please ?

Skizofre3e @Anonymous ,

I was able to set the height using some javascript by setting the css dynamic. 

First, i assign a class to my div (where report will display), then i calculate the current window height. finally, on the document ready method, i pass the height minus my header size in px. in my case it is 201. I was able to test it on multiple display sizes and it works as expected. Let me know if this works.

html:

<div id="reportDiv" class="myDiv"></div>

javascript&colon;

$(document).ready(function () {
setHeight();
});
function setHeight() {
windowHeight = $(window).innerHeight();
console.log('window height ' + windowHeight);
windowHeight = windowHeight - 201;
console.log('NEW window height ' + windowHeight);
$('.myDiv').css('height', windowHeight);
};
$(window).resize(function() {
setHeight();
});

@jsanc22e any ideas on how your solution could be combined with this in a page tempate or custom JS ?

I have got this custom JS code working for me to hide the report filters and page tabs - but the height is not editable - not being a JS / HTML expert, any ideas on how to combine this?

 

$( document ).ready(function() {
var rpEle = $('.portal-pbi-embedded'); // select report element
var report = powerbi.get(rpEle[0]); // get report instance
// we want to update settings when the report is loaded
report.on("loaded", function () {
const newSettings = {
panes: {
filters :{
visible: false
},
pageNavigation:{
visible: false
}
}
};
report.updateSettings(newSettings)
.catch(error => { console.log(error) });
});
});

Eric_Zhang
Employee
Employee


@cyan wrote:

Hi everyone,

 

When setting power bi report's Page View to "Fit to Page" and embedding the report in our web app, the report doesn't fit the height of the page it only adjusts to the width, you can see this in Microsoft Power BI embedded sample by resizing your page and you will notice the empty grey space on the height of the iframe, https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

Is it possible that "Fit to Page" option actually allows the report to fit the page and not only the width, any suggestions for possible solution to this problem?

 

Thanks...


@cyan

As far as I know, the 'fit to page' only affects the layout in Power BI service. When embedding, in Javascript, you can only specify 'fitToWidth','oneColumn' and 'actualSize'.

     var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
pageView: "fitToWidth",
id: embedDashboardId
};

Hi @Eric_Zhang

Adding pageView property to the embed configuration in Javascript is not affecting the embedded report (I added it the same way you did, pageView : "fitToWidth"), is this property working?

The only way the layout in our embedded report changes is when I change it in Power BI service or Desktop and publish, also is there any chance that Fit to Page could be applied to the embedded report as well, cause that will solve the empty grey space problem(I see the same problem in Microsoft embedded sample when I resize https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html ) because Fit to width is good that makes the report responsive but the grey space is wasting lots of space.

 

Thanks... 

leahw
Frequent Visitor

does anyone have any answer on this?

In the embed config settings, you can change the display type by setting the layoutType to models.LayoutType.Custom, and then setting the displayOption property of the customLayout object to one of the models.DisplayOption values (see example below). 

 

settings: {
                     layoutType: models.LayoutType.Custom,
                     customLayout: {
                        displayOption: models.DisplayOption.FitToPage
                     }
                  }

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors