Infinite scroll when app inside iframe

Anvil Q&A
1

Hi
I am embedding a small app inside an iFrame and for some reason I don’t understand the iframe seems to load an infinite number of lines.

This is the super-simple forum-app:
https://anvil.works/build#clone:PBNJ5TEHDFU4KLPG=NYNF7NHAVQXCCH5DU6QZZQ3U

Here: http://free-online-tools.site/forum-demo.html you can see what it does.

This page’s code:

<html>
<head>
<script data-ad-client="ca-pub-8598333505076119" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="https://anvil.works/embed.js" async></script>
</head>
<body>
<iframe style="width:100%;" data-anvil-embed src="https://PBNJ5TEHDFU4KLPG.anvil.app/HLX3BI3W7PZ2NWZFPUN5LDHL"></iframe>
</body>
</html>

Why is it scrolling this way?

Thanks and BR

2

Hi @aldo.ercolani,

This app suffers from an old issue, where we weren’t counting the “Free” banner, so the app kept growing to “full height of the iframe, plus 50px”, so the iframe would expand, so the app would grow…and thus to infinity :slight_smile:

You can either clone a fresh app and pick up the updated Material Design theme, or you can apply the update yourself. Around line 130 of theme.css in your Assets:

/* Page structure: App bar with optional left nav */
.structure {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100vh - %anvil-banner-height%);
  height: 0; /* To make flex-grow work in IE */
}

(Note the min-height: calc(...) line) - that’s what stops it growing forever in an iframe!

3 Likes
3

Thanks @meredydd I’ll try that tonight.

4

Hi
the suggested solution seems to work as the homepage is loaded, then as soon as I click on the menu item, infinite scroll starts again.
I see that it’s the containing iFram that is growing this time, so I tried to add the fix there too (main HTML page code):

<body>
<iframe style="width:100%; min-height:calc(100vh - %anvil-banner-height%);" data-anvil-embed src="https://PBNJ5TEHDFU4KLPG.anvil.app/HLX3BI3W7PZ2NWZFPUN5LDHL"></iframe>
</body>

But it still grows infinte.

5

Looking at your example app, when you click the “module1” link, you’re trying to load another “Standard Page” form, complete with an app bar, into your app! The inner form you’ve added tries to grow to 100% height, but with the padding this makes the main page taller than the iframe, so the iframe expands, and then the inner form grows to 100% height of the newly-expanded iframe, and on we go.

The solution is not to nest “Standard Page” forms inside each other. If you’re doing navigation by replacing content, then use a Blank Panel form instead – the navigation section of the docs has an example.

2 Likes
6

Ok this completely fixes it.
I followed the navigation doc section but I thought I could also add Standard Forms.
Indeed, if not inside an iframe, that works flawlessly as well.
A mind-note has been taken.
Thanks @meredydd.