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.
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.
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?
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? :)
It's just representation for making it look simple while asking.
Then something like this?
This will work only when creating, but I need it to be responsive while interacting (size changing).
I need to change the height of the iframe inside this function to be more specific:
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 :)
Okay, got it! :) html: "<iframe style='position:absolute; width: 100%; height: 100%;' src='http://framerjs.com'></iframe>"
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.
Hmm, it works for me fine
Oh actually it works! Interesting, I thought I tried that, maybe something was different. Thanks!