cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
cyan Regular Visitor
Regular Visitor

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...

6 REPLIES 6
Moderator Eric_Zhang
Moderator

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


@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
};
cyan Regular Visitor
Regular Visitor

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

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
Frequent Visitor

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

does anyone have any answer on this?

tjuni2 New Member
New Member

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

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
                     }
                  }
skizofre3e Member
Member

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

@cyan did you solve this issue please ?

jsanc22e Visitor
Visitor

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

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

Helpful resources

Announcements
Exclusive LIVE Community Event #3 – Ask Arun Anything

Exclusive LIVE Community Event #3 – Ask Arun Anything

Join us in the third Triple A event!

Meet the 2020 Season 1 Power BI Super Users!

Meet the 2020 Season 1 Power BI Super Users!

It’s the start of a new Super User season! Learn all about the new Super Users and brand-new tiered recognition system.

January 2020 Community Highlights

January 2020 Community Highlights

Make sure you didn't miss any of the things that happened in the community in January!

Top Kudoed Authors