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

Embedded report datagrid row heights load with zero height

We have an embedded report inside a .net web app. The charts render fine on page load but the datagrid rows are not visible due to the fact their heights are rendered with zero height.  The grid loads fine in power bi and will also render fine if you change anything on the report (e.g. filter, sorting, etc.) that causes a DOM refresh of the datagrid.  Anyone have any idea why this would happen on first load with a embedded report?


Screen Shot 2020-06-18 at 9.53.18 AM.png

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Regular Visitor

Re: Embedded report datagrid row heights load with zero height

Figured it out for those seeing the same issue.  The browser difference is just DOM render speed.  I'm using an MV* JS framework (aurelia) and using a show/hide binding that hides the DIV container that contains the iframe.  When the embedReport() method runs, I'm using on('rendered') event handler to show the div container with the iframe so we dont see the PBI loader since our site will be more than just PBI and isn't consistant with our styling.  So I just changed the show/hide functionality (which is using display:none) to opacity:0 for hide and opacity:1 to show and we're back in business. I'm assuming this is because the iframe contents need a visible element to render properly to the available dimentions which don't really exist when display:none is set.

View solution in original post

5 REPLIES 5
Highlighted
Responsive Resident
Responsive Resident

Re: Embedded report datagrid row heights load with zero height

Hi @rkever 

The only time I have seen anything similar to this, is when the report accidentally gets saved with a selection/filter/slicer state that isn't valid in the context of the embedded session.

After interactions - the filter/slicer context changes and everything 'appears' again.

if you suspect its a render issue - it's worth testing in alternative browsers to rule out some DOM rendering glitches.

Highlighted
Regular Visitor

Re: Embedded report datagrid row heights load with zero height

Thanks @MattCalderwood. I did try it on a couple of browsers and it only happens when it's embedded (safari, chrome, and Edge) and does not have this issue when viewing it on app.powerbi.com.  We'll see if it's something to do with some invalid state item.

Highlighted
Regular Visitor

Re: Embedded report datagrid row heights load with zero height

I decided to test it again and the datagrids do render properly on first load on Safari but not in Chrome or FF (we aren't setup for IE or Edge as we haven't added the JS polyfills).  Any reason why embeded angular UI would do this for embed only in Chrome/FF and not Safari??

 

This is what we have set for the iframe with no additional config in the JS embedReport() method.

<iframe src="_URL_" scrolling="no" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>

 

Highlighted
Regular Visitor

Re: Embedded report datagrid row heights load with zero height

Figured it out for those seeing the same issue.  The browser difference is just DOM render speed.  I'm using an MV* JS framework (aurelia) and using a show/hide binding that hides the DIV container that contains the iframe.  When the embedReport() method runs, I'm using on('rendered') event handler to show the div container with the iframe so we dont see the PBI loader since our site will be more than just PBI and isn't consistant with our styling.  So I just changed the show/hide functionality (which is using display:none) to opacity:0 for hide and opacity:1 to show and we're back in business. I'm assuming this is because the iframe contents need a visible element to render properly to the available dimentions which don't really exist when display:none is set.

View solution in original post

Highlighted
Responsive Resident
Responsive Resident

Re: Embedded report datagrid row heights load with zero height

That's quite an obscure bug to find, but makes sense from the DOM layout perspective.
I would have thought that it would have caused more issues than just the data tables though.

Nice one!

Helpful resources

Announcements

August Community Highlights

Check out a full recap of the month!

August 2020 CYST Challenge

Check out the winners of the recent 'Can You Solve These?' community challenge!

Experience what’s next for Power BI

Join us for an in-depth look at the new Power BI features and capabilities at the free Microsoft Business Applications Launch Event.