Custom Element Resizing on Load?

Ask the community
,
1

So, I have a plugin that I need to run on my site. Any sane user would use an iFrame Embed and accept the limitations of not being able to resize. But I’m not sane.

So I dove into using Custom Elements, so I learned about web components, refreshed my memory on creating dom elements, and went to town. Turns out, I needed to have the component js write the embed, rather than a simple

innerHTML = `<script>[...]</script>`

First off, it actually works. It works perfectly in preview mode- it automatically resizes based on content the plugin loads and everything!

2396×1446 214 KB

But, on the live site, the whole element is being resized to a width of 300px- through a div that is being written by Wix.

2182×1632 159 KB

Here’s the affected div

868×1086 128 KB

I completely realize I’m doing something wix never intended on someone doing. But I want it to work. :grinning: Any thoughts?

2 Likes
2

Same here Bro: works fine in preview (size-wise), but get shrunk down on the live site: Wix, any idea why the custom elements do that please?

3

hey

Add a css position: absolute to override the parent width and height.
but if the iframe is built using the script you can’t do that.

May be create a custom element that create a Iframe with width and height and position absolute.
and run the script from there.

That said
I do have tips on resizing IFrame using custom [element](element

You)
[https://www.wix.com/velo/forum/tips-tutorials-examples/resizable-iframe-using-custom-element](element
https://www.wix.com/velo/forum/tips-tutorials-examples/resizable-iframe-using-custom-element

You)

[You](element

You) just need to update this line
iframe . style = “resize:both”
to the width and height

4

I got it work with the following lines in the custom element’s Contructor:

 this.width = '100vw';
 this.height = '100vh';
 this.style.position = 'absolute';
 this.style.left = '0'
 this.style.right = '0'
 this.style.top = '0';
 this.style.bottom = '0';