How auto-height works (and how to enable it)

Without auto-height, you'd have to guess how tall to make the iframe. Too short and the calculator gets a scrollbar inside it; too tall and there's empty space below the result. Auto-height fixes that — the iframe resizes itself as the calculator content grows or shrinks.

How to enable it

Paste a tiny script just below your iframe:

<iframe
  src="https://yourname.calcwidgets.com/embed?widgets=loan-repayment&view=tab"
  width="100%"
  height="800"
  frameborder="0"
  id="calcwidgets-frame"
  title="Mortgage Calculators"
  style="border: none;">
</iframe>
<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'calcwidgets-height') {
    document.getElementById('calcwidgets-frame').style.height = e.data.height + 'px';
  }
});
</script>

The id="calcwidgets-frame" on the iframe must match the getElementById('calcwidgets-frame') in the script. If you have multiple iframes on one page, give each one a unique id and write one listener per iframe.

How it works under the hood

When the calculator content changes height (tab switches, results expand, validation errors appear), the embed sends a postMessage to the parent page:

window.parent.postMessage({ type: 'calcwidgets-height', height: 1234 }, '*');

The listener script catches that message and resizes the iframe to match. Nothing else changes — the iframe contents remain isolated from your page's CSS.

I copied the code but the iframe still has scrollbars

Three things to check:

1. The script is on the page — look in your browser's "View Source" and confirm both the iframe and the <script> block are there. WordPress page builders sometimes strip script tags from HTML blocks; if so, use the WordPress shortcode approach instead.
2. The iframe id matches the script's getElementById — if you renamed the iframe id, update the script too.
3. No Content Security Policy is blocking postMessage — rare, but some enterprise CMSes block cross-origin postMessage. If you're behind a strict CSP, allow calcwidgets.com as a frame source.

Multiple calculators on the same page

If you've got two iframes on one page and only one auto-resizes, you need a unique id per iframe and the script needs to check e.source to know which iframe sent the message:

<iframe id="calc-a" src="..."></iframe>
<iframe id="calc-b" src="..."></iframe>
<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'calcwidgets-height') {
    ['calc-a', 'calc-b'].forEach(function(id) {
      var f = document.getElementById(id);
      if (f && e.source === f.contentWindow) {
        f.style.height = e.data.height + 'px';
      }
    });
  }
});
</script>