Search code examples
htmlcssiframe

Remove Vertical Scroll on iFrame

Having some trouble removing the vertical scroll from the Available Careers listing iframe on this sample page.

If I increase the height="1600px" to height="1700px", then the vertical scroll disappears on desktop, but still remains on mobile.

    <div class="jobs__wrap bg-grey-pattern">
    <div class="jobs__header">
    <h4>Available Careers</h4>
    </div>
    <iframe src="https://demorecruiting.paylocity.com/recruiting/jobs/All/85e4f102-5f4c-4548- 
    b6ca-cc391c862dc5/CPUMMILL" width="100%" height="1600px" style="border:0;" 
    allowfullscreen="no" loading="lazy"></iframe>
    </div>

And the tricky thing is that currently there are 16 open available job positions. That number will fluctuate, and the iframe section could show as little as 2 or 3 or as many as 20 or so available positions...so the iframe job listing section height will decrease and increase.

Solution 

  •  <div class="jobs__wrap bg-grey-pattern">
    <div class="jobs__header">
    <h4>Available Careers</h4>
    </div>
    <iframe onload="resizeIframe(this)" id="iframe-id" src="https://demorecruiting.paylocity.com/recruiting/jobs/All/85e4f102-5f4c-4548- 
    b6ca-cc391c862dc5/CPUMMILL" width="100%" height="100%" style="border:0;" 
    allowfullscreen="no" loading="lazy"></iframe>
    </div>
<script>

  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }

</script>