Autosize the iframe so that it fits the full length of its contents

Bug Reports
#1

Hi all,

I have an app embedded in an IFrame and I was wondering how to autosize it to its contents so that the scrollbar doesn’t show up. You can see it here:

sc
sc1387×622 89.2 KB

Any help is much appreciated as I’m quite new at JS.

The custom html for the iframe component is.

<div class="iframe-wrapper">
  <iframe style="width: 100%; height: 110vh; border: none"></iframe>
</div>

<script>
  function setURL(url) {
    $(this).find("iframe").attr("src", url);
  }
#2

Hi Al,

There’s a script you can include that communicates between the iframe and the main window to automatically set the iframe's height. Include it in your code like so:

<script src="https://anvil.works/embed.js" async></script>

<iframe style="width:100%" data-anvil-embed src="https://your-app-name.anvil.app"></iframe>

Here’s the relevant docs entry.

We’re looking into a possible bug with that script relating to cross-origin permissions so let us know whether it works for you.

1 Like
#3

@shaun I must be doing something silly because I am not able to make this work.

I took the code you gave above and added it to the custom html in the custom iframe component, with the only change being that src is determined on the fly.

<div class="iframe-wrapper">
  	<iframe style="width: 100%"></iframe>
</div>

<script src="https://anvil.works/embed.js" async></script>

<script>
  function setURL(url) {
    $(this).find("iframe").attr("src", url);
  }
</script>

I get even more scroll bars…:frowning:. Please give me a nudge in the right direction if you have a sec.

sc1

#4

The iframe should have the attribute data-anvil-embed, so adding that to your iframe might do it:

<div class="iframe-wrapper">
  	<iframe data-anvil-embed style="width: 100%"></iframe>
</div>

If it still doesn’t work, would you mind checking your browser console to see if there are any errors?

#5

Sorry I missed that from above. But I still get the same result when the following is added.

<div class="iframe-wrapper">
  	<iframe data-anvil-embed style="width: 100%"></iframe>
</div>

<script src="https://anvil.works/embed.js" async></script>

<script>
  function setURL(url) {
    $(this).find("iframe").attr("src", url);
  }
</script>

Here is the browser console output:
sc

#6

Many thanks - yes that’s the suspected (now confirmed!) bug in the embed.js script. I’ll move this to Bug Reports.

If you know the height of your embedded app in advance, you can set the height attribute of the iframe. Not ideal but it might get you off the ground while the bug is still in place.

#7

Thanks very much. Will do.

#8

Has this issue been resolved? I’m trying to embed my app on the website and I still end up getting scroll bars even after using “data-anvil-embed”.

#9

Hi @kmichael,

The issue discussed here was indeed resolved. If you’re still having problems, can you provide an example of a .html file with an Anvil embed that causes scrollbars and shouldn’t?

#10

Here’s the HTML bit:
var view = function () {

console.log(this.props);

return (

    <div className="page-content iqcalculator">

        <div className="container">

            <div className="content">

                <div className="main">

                    <iframe

                    id="Iframe"

                        data-anvil-embed 

                        className="frame"

                        scrolling="no"

                        onLoad={() => {

                            window.stopSpinning(this.spinningSelector);

                        }}

                        src="https://LEPL3Y24JSF34HPX.anvil.app/NKSXXKNCSIHE77EJOZGOPULR"></iframe>

                    <script src="https://anvil.works/embed.js" async></script>

                </div>

            </div>

        </div>

    </div>

)

}

export default view;

Here’s the CSS part:
.iqcalculator{

.content{

    .main{

        .frame{   

            border: none;

            width: 100%;

            }

        }

    }

}
#11

@meredydd any progress on this issue? I’m assuming there’s something wrong on my end of the code, but I’d love to get some help on fixing it.

#12

Hi,
Did you get this resolved? I am encountering the same issue.