Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Question

Dynamically set embed depth

  • 30 July 2018
  • 3 replies
  • 484 views
Ezra_Wolfe
Userlevel 2

HI all,



We’re using an iframe to embed Looker in our application.



Some of our dashboards are much deeper than the depth of a user’s screen. When we embed without setting a min-height CSS we can end up with two scroll bars: one for our application and one for Looker.



So we added a min-height greater than the dashboard height and that fixed the issue. We only had one scroll bar – for our application…



However, when drilling into a Look, the visualization now takes on the full height of the min-height, essentially rendering it unreadable because the visualization is now several screens deep.



The obvious solution would be to use JavaScript calculate the height of the user’s viewport and then set the iframe height to match the height of the viewport. In that way, our application wouldn’t have a scrollbar and the embedded Looker dashboard would have a scrollbar. When drilling down, the Look could only be as deep as the height of the user’s monitor.



However, there are a couple things I don’t like about that approach. One is that it will probably slow rendering the page a tiny bit or there may be a visible jump as the iframe resizes, the other is that resizing the monitor would require recalculating the viewport size.



Just wondering if anyone else has encountered this issue, and if so as any advice?



Thanks,


Ezra

3 replies

izzy
Userlevel 7
Badge +1

Hey Ezra,



Izzy from Looker support here! We’re taking a look at this and our engineering team is going to be working on a fix-- This isn’t expected behavior, so although your solution does sound like a decent one (with those caveats you already raised), we plan to fix it on our side too so you won’t have to 🙂 .



Thanks for bringing this up and helping make Looker even better,


Izzy

Marc_Wilson
Userlevel 2

Hi Ezra,



We have a huge embed use case as well and ended up with the double scrollbar issue as well. To resolve this, I did a little digging on the JavaScript Events (documented here). There is an event called page:properties:changed (documented here) which comes with a height property. This is the height that is needed to render the full dashboard without any scrolling.



I ended up just setting the height of my iFrame to whatever that number. If you do this, you should get what you want. As far as the drilling goes, we haven’t got that far yet. But, I would assume that the page:properties:changed event gets called as the user interacts with the dashboard (notably a drill down).



Also, one thing to note is that the page:properties:changed event is called multiple times (about 3. not sure where that number comes from). So, you need some sort of logic that will always update your iframe height when that event gives you a new height value.

Ezra_Wolfe
Userlevel 2

Thanks for the pointer! We’ll investigate and see how this work for us.



Ezra

Reply


Terms of Service