Embedded Dashboards and Looks fall out of the container provided

Currently we are experiencing an issue in which embedded looks and dashboards occasionally do not load a look to fit the size of container it’s provided.

We are currently using vue, and vuetify cards specifically, to house the iframe tag which dynamically gets populated with the url as needed (as a user interacts with tabs). This seems to work great… except when it doesn’t.

Digging in, these cards simply create divs whose only styling requirement I enforced was a height, of 750px. All dashboards are short enough to fit into that space, and yet occasionally some random vis will expand to fit slightly outside of that space. Tracking the divs inside the iframe that looker populates, shows that this is a visualization that falls outside of the confines of a container div that looker provides, ( <div class="vis-container"… or a parent <div class="vis-wrapper-container">? Or perhaps it’s higher parent, up to <div class="container-relative">? ) inside the logic of the iframe - and well within the component rendering the dashboard as a whole - I can see the entirety of <div id="lk-embed-container"…, which fills the space just fine. When we first noticed this, it was only in embedded looks, in which a “column limit reached” alert pushed the bottom of the vis out of the frame. We switched to single or two-tile dashboards, and now the same is happening, and not necessarily for those which contain looks that have pivots and column limit reaching potential.

In addition, occasionally a vis will load inside the container div looker provides, completely squashed to the left. It will normally right itself in a split second… except when it doesn’t. Occasionally, it will hang there and not resize, just squashed to the left. Digging into the tags again, it appears to be that one of the above vis-container divs squashes, inside the component that is rendering the entire dashboard or look. I know to resize the window and it will pop into place, but that’s not a sustainable solution for us, since we are developing a product to show to our customers.

It’s almost as if looker’s vis container doesn’t know how to read and fill the space properly within it’s own parent component - the dashboard (as a container for the vis) fills the container div we provide, just fine.

Anyone else experiencing this issue? Any potential solutions, or perhaps data we can provide within the div containing the iframe, to give it whatever information might be needed? Any help is greatly appreciated!

(I can provide screenshots after I scrub some information from them, if requested/if helpful)