This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Emin İnanç Ünlü
Posted Jan 04 - Read on Facebook

How can I fix the height problem of the iframe here? It doesn't fill the whole height of the layer.

If I change the height style to: 1000px, it works; but I need it to be responsive, so this fix doesn't work for me. Interestingly width property works with % value but not height property.

13 Comments

Andrew Liebchen

This is a common problem with CSS, and more complicated with an iframe. With a normal element, you could use relative position on the parent and absolute position on the child to expand it to fit. Unfortunately iFrames don't like this (if I remember).

Two ideas: maybe Flexbox (CSS system) will work here, or if you know the proportion to the viewport's height, use CSS's vh unit.

Finally, Framer is just Javascript, so you could detect a window resize, recalculate the new height, and apply it to the iFrame.

Emin İnanç Ünlü

I can try Flexbox. Also I thought changing the height of the iframe when window resize, but couldn't figure out how to do that efficiently.

There is a part in the docs like here:
layerA.html = "<div><canvas id='canvas'></canvas></div>"
canvasElement = layerA.querySelectorAll("#canvas")

How can I edit the height style of the iframe without changing all the html content?

Radek Kyselý

How can it be responsive when you have fixed width and height of layer ›a‹? Are you going to resize the layer and want the iframe to be 100% size of this layer? :)

Emin İnanç Ünlü

It's just representation for making it look simple while asking.

Radek Kyselý

Then something like this?

Emin İnanç Ünlü

This will work only when creating, but I need it to be responsive while interacting (size changing).

Emin İnanç Ünlü

I need to change the height of the iframe inside this function to be more specific:

Radek Kyselý

Well, then a messy solution would be to create function for initializing iframe and then calling on creating and resize.

But I believe there is a simpler one, let me think :)

Radek Kyselý

Okay, got it! :)
html: "<iframe style='position:absolute; width: 100%; height: 100%;' src='http://framerjs.com'></iframe>"

Emin İnanç Ünlü

Yeah the first one would be messy. : ) And I tried the second one already and it's not working for height property for some reason.

Radek Kyselý

Hmm, it works for me fine

Radek Kyselý
Emin İnanç Ünlü

Oh actually it works! Interesting, I thought I tried that, maybe something was different. Thanks!

Read the entire post on Facebook