Infinite HTML - Embeding code in Wordpress

cenguidanos · September 25, 2019, 4:25pm

Hello Pythonist,

I’m trying to embed my WebApp in my Wordpress Theme.

The WebApp embed well but the page of the web increase de height of the ‘embeded row’ to the infinity down.

¿How i can solve this?

Thanks,

Cristian

shaun · September 26, 2019, 9:48am

Hi @cenguidanos, welcome to the Forum!

Could you please share the exact code you’re using to embed your app (the <iframe> tag and the <script> tag)? If you don’t want to show us your app’s URL, you can replace it with a made-up one!

cenguidanos · September 26, 2019, 10:03am

Hi Shaun, thanks

The code:

<script src="https://anvil.works/embed.js" async></script>
<iframe style="width:100%;" data-anvil-embed src="https://PWHBAE66EI4FTUJG.anvil.app/S7L7LXRTZGSJ3ACFIJRL222J"></iframe>

shaun · September 26, 2019, 10:44am

When I use that in a file on its own, I get the correct behaviour. We have seen infinite scrolling before when omitting the style attribute - although you have not done that, of course!

I suspect this is a function of where it is in your WordPress page - does it take up the full width, or is it next to another element?

If you’re able to share the HTML of your WordPress page, that would also be helpful

cenguidanos · September 26, 2019, 7:16pm

Here is the HTML code from chromium inspector:

shaun · September 30, 2019, 2:33pm

Thanks @cenguidanos, this is a bug, we’ll look into it.

There is a workaround - if you remove this tag:

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

and set the height of the IFrame explicitly (using whatever height works well for your app):

<iframe data-anvil-embed style="height: 560px" src="https://S2K6LRFPR6O94VOS.anvil.app/MK3KY4PVWRTEIRM2BGH3MSNS" ></iframe>

Then the infinite expansion won’t happen. The problem is with the script.