How do I get this iframe to resize according to content?

Question

Having a devil of a time getting an iframe to resize according to its content. I've tried a bunch of different 'solutions' posted in forums, and now I'm using the solution at https://iframe-resizer.com/.

Here's the test page I'm working with: https://mcpirstaging.wpenginepowered.com/maine-legislature/

Here's the code on the parent page:

<iframe id="myIframe" src="https://george-mainemonitor.github.io/my-reps/" style="width: 100%;height: 100vh;border:none;"></iframe>

<script src="/wp-admin/js/iframe-resizer.parent.js"></script>
<script>
  iframeResize({ license: 'GPLv3', waitForLoad: true }, '#myIframe');
</script>

The iframe displays with a lot of empty whitespace on initial page load, and then when the user interacts with the content in the iframe (submits a form query) when the results load the iframe does not resize at all.

Not seeing any errors happening. Any idea what might be going on and how to resolve this? Thank you.

Answer 1

Try setting waitForLoad to false.