cancel
Showing results for 
Search instead for 
Did you mean: 
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
skizofre3e
Helper III
Helper III

@cyan did you solve this issue please ?

Skizofre3e @skizofre3e ,

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();
});

Oex
Frequent Visitor

@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
Microsoft
Microsoft


@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
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power BI Dev Camp Session 23 768x460.jpg

Check it Out!

Mark your calendars and join us on Thursday, June 30 at 11a PDT for a great session with Ted Pattison!

June 20 episode 7 with aka link 768x460.jpg

The Power BI Community Show

Join us on June 20 at 11 am PDT when Kim Manis shares the latest on Azure Synapse analytics, the Microsoft Intelligent Data Platform, and notable Power BI Updates from Microsoft Build 2022.