Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
3 years ago

Embeded "visual-sandbox" iframe

When i run my custom visual in developers playground i get it inside the following iframe.

 

<iframe class="visual-sandbox" sandbox="allow-scripts" name="visual-sandbox" width="600" height="551" csp="default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' ;" src="https://app.powerbi.com/13.0.19134.41/cvSandboxPack.html?locale=en-GB" style="width: 800px; height: 551px;">

 

 My visual has some internal responsiveness logic which is affected with style parameter of this iframe. Is there any way i can affect width value inside style parameter programmatically?

Need Help

3 Replies

  • dm-p's avatar
    dm-p
    Super User
    3 years ago

    Hi Anonymous,

    Due to the sandboxing in-place, your logic cannot access anything in the DOM that is above the iframe's root <html/> tag.

    It is possible to access the height and width values to read them (via host.viewport). but there are not APIs to specify height and/or width of the enclosing container.

    If this is a feature you need, I suggest that you either create an issue in the GitHub repo, or email [email protected] to request.

    Regards,

    Daniel

    • Anonymous's avatar
      Anonymous
      Not applicable
      3 years ago

      dm-p , okay, got it. is there any way i can do that with the embedding code? also, its unclear where does the initial values come from. i've tried adding a resize event listener to the document, but as soon as i stop resizing the browser window changes get restored to the default values.

      • dm-p's avatar
        dm-p
        Super User
        3 years ago

        Unfortunately I can't assist with anything around Power BI Embedded, as I don't use it, so may require input from someone with that knowledge as to how the General height and width properties are set. for a specific visual It should be similar to setting them for any other visual (assuming it's possible to do that).

        To round-out the part pertaining to within a custom visual, the iframe sizing comes from the height and width properties from the General menu, less 10px for whitespace around the iframe. So, if your visual is 280 x 280 in the properties pane, the iframe's style attribute would be "height: 270px; width: 270px;. The viewport property on the visual host object would also report height and width as 270 (which will match).