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
Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

charticulator_carousel_with_text (1).png

Charticulator Design Challenge

Put your data visualization and design skills to the test! This exciting challenge is happening now through May 31st!

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Power BI Release May 2022 768x460.png

Check it out!

Click here to read more about the May 2022 updates!

Top Solution Authors