Dynamic Height for Embed HTML or Custom Element to Resize with Iframe Content

Ask the community
1

Hi everyone,

I’m trying to display an iframe on my Wix page that hosts a search-based tool. The tool generates results dynamically, which means the iframe’s height should adjust depending on the number of results displayed.

I’ve tried both the Embed HTML and Custom Element options to achieve this, but I’m running into the same issue: when the content height exceeds the iframe’s initial size, it adds a scrollbar instead of resizing the iframe and pushing the page’s height down.

Is there a method or workaround to dynamically adjust the iframe’s height so that it resizes with its content and avoids scrollbars? I’d appreciate any guidance or examples.

Thanks in advance!

3

Hi, Brian_Lewis !!

I have the impression that custom elements with an increasing amount of content can expand while pushing down Wix elements below them. In contrast, the HTML Component (iframe) essentially cannot dynamically adjust its width and height from the initial settings made in the editor. Therefore, when the content inside increases, it is likely designed to generate a scroll bar automatically.

However, it’s not entirely impossible to dynamically manipulate the size of the HTML Component. My experiments suggest that while it seems restricted from changing its size internally, you can dynamically adjust its size externally. That said, I absolutely do not recommend using this method. While it does work, in my experiments, although I was able to enlarge the size, I couldn’t make it push down the Wix elements below the HTML Component.

So, even if you use this inadvisable method, I don’t think the HTML Component will fulfill your requirements. For this reason, I recommend implementing it with a custom element! If my memory serves me right, custom elements should be able to push down elements below them… but I apologize if I’m mistaken. :melting_face:

4 
class ListingsLoader extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.iframe = document.createElement('iframe');
        this.iframe.style.width = '100%';
        this.iframe.style.height = '100%';
        this.iframe.style.border = 'none';
    }

    static get observedAttributes() {
        return ['url'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'url' && oldValue !== newValue) {
            this.loadContent(newValue);
        }
    }

    connectedCallback() {
        this.shadowRoot.appendChild(this.iframe); // Append iframe only once
        const initialUrl = this.getAttribute('url');
        if (initialUrl) this.loadContent(initialUrl);
    }

    loadContent(url) {
        if (this.iframe.src !== url) {
            this.iframe.src = url;
        }
    }
}

// Register the custom element
customElements.define('site-loader', ListingsLoader);
5

I shared the Custom Element code above, which I’m using to display the iframe. However, it doesn’t adjust the Section’s height automatically and still shows a scrollbar, similar to the behavior of the HTML Component.

Here’s the page code:

$w.onReady(function () {

    const url = "https://test.churchindex.org/index.php?listing=74ac9ec3-a109-11ef-a292-00163eb3bc90&url=https%3A%2F%2Fchurchindexorg.wixsite.com%2Fsandbox";
    $w('#customElement').setAttribute('url', url);
	
});
6

I see :thinking:, you’re creating an iframe inside a custom element and loading an external site into it. Since you’re using an iframe, it might be difficult. I tried it a bit, and while it was possible to dynamically adjust the height of the iframe, I couldn’t get the information on what height to set because it was blocked by CORS restrictions, so it wasn’t possible… :melting_face: