Make iframe automatically adjust height according to the contents

VPXMedia · Post by **VPXMedia** » Tue May 31, 2022 7:07 am

Hi,

Could someone please share the code or suggestions for making an iframe automatically adjust its height based on the contents in WB-17 without using a scrollbar? There is no such option in the iframe properties, and I tried several suggestions and code snippets from the internet without success.

Thanks

Post by **Pablo** » Tue May 31, 2022 7:53 am

Maybe this will be helpful?
https://wysiwygwebbuilder.com/iframeresizer.html

VPXMedia · Post by **VPXMedia** » Tue May 31, 2022 8:54 am

Thanks Pablo. I installed the extension as specified in the PDF on the page with the inline frame as well as on the Content page and adjusted the settings, but nothing changed. The iframe height on one of the long pages is still scrolling. Disabling the "Scrolling" hides the scrollbars but strips off/hides the remaining content in the long page - (Chrome, FireFox, Edge).

I even tried different "Height Calculations" in the extension with no luck

Post by **Pablo** » Tue May 31, 2022 9:32 am

Are you sure you have followed all instructions?
Including this?
https://github.com/davidjbradshaw/ifram ... hooting.md

Are the any error in the browser console?

Note that this is a third party script so it is provided "AS IS".

As you may have learned, resizing an inline frame can be very complicated, so that is why a third party script is required.

wwonderfull · Post by **wwonderfull** » Tue May 31, 2022 1:03 pm

For an iframe showing entire content data, Is this what you are looking for?
Take an empty page then take HTML object from tool box and paste the codes below

Code: Select all

<!DOCTYPE html>
<head>
<style>
#content{

 min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#f2f0ea;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}

</style>
<head>
<html lang = "en">
<body>
    <div style="content">
        <iframe style="overflow:hidden; position: absolute; display:block;  min-height: 100vh;  background-color: #f2f0ea; border: none;" 
                src="https://en.wikipedia.org/wiki/Pavel_Durov?embedded=true" 
                height=600%; width=100%  scrolling="no" ></iframe>
    </div>
</body>
</html>

test the code in w3schools
https://www.w3schools.com/html/tryit.as ... lt_default

VPXMedia · Post by **VPXMedia** » Wed Jun 01, 2022 7:04 am

Many thanks. The HTML code works fine. I believe the iframe resizer extension should be updated.

www.wysiwygwebbuilder.com

Make iframe automatically adjust height according to the contents

Make iframe automatically adjust height according to the contents

Re: Make iframe automatically adjust height according to the contents

Re: Make iframe automatically adjust height according to the contents

Re: Make iframe automatically adjust height according to the contents

Re: Make iframe automatically adjust height according to the contents

Re: Make iframe automatically adjust height according to the contents