Kevin Powell - Community•10mo ago

Height iframe

Hi! First time using iframes. Why does it have vertical scrolling? https://github.com/AMarlonG/Ice-Hot-kode/blob/main/Saturday/index.html Tried adding height, changing width to max-width, etc. But cant get it to look like this: https://www.yr.no/en/content/1-72837/card.html

6 Replies

MarkBoots•10mo ago

an iframe is not aware of its contents. just like a normal page, the content adjusts to the window/viewport, not the other way around

Å Marlon GOP•10mo ago

Ouch ... that's brainy for me ... Inspecting both elements they both now have a max-width: 1000px on the class:layout what should I be looking for. I know you're trying to teach me and not tell me, but a bit stumped right now.

MarkBoots•10mo ago

you can try to use js to check the contents of that iframe source, but if it comes from an other domain, it's possible they block that

const iframe = document.querySelector("#my-iframe");
if(iframe){
  window.addEventListener('resize', resizeIframe);
  iframe.addEventListener('load', resizeIframe);
  resizeIframe()
} 
    
function resizeIframe() {
  const doc = iframe.contentDocument?.body || iframe.contentWindow.document?.documentElement
  const height = Math.max(doc.scrollHeight, doc.offsetHeight, doc.clientHeight);
  iframe.style.height = height + 'px';
}

const iframe = document.querySelector("#my-iframe");
if(iframe){
  window.addEventListener('resize', resizeIframe);
  iframe.addEventListener('load', resizeIframe);
  resizeIframe()
} 
    
function resizeIframe() {
  const doc = iframe.contentDocument?.body || iframe.contentWindow.document?.documentElement
  const height = Math.max(doc.scrollHeight, doc.offsetHeight, doc.clientHeight);
  iframe.style.height = height + 'px';
}

--edit: this won't work. Browsers block scripts trying to access a frame with a different origin.

Å Marlon GOP•10mo ago

Oh. I see. So because iframe is just inserting an html element, I can't really do much with css? the source controls the css?

MarkBoots•10mo ago

yep, the content is not yours, it's controlled by the other party

Å Marlon GOP•10mo ago

screw it then. it wasn't that important ... I'm adding this whole shabang to a wordpress page, and so I don't wanna jump into the js part of it to be honest. Thanx anyways. Good to learn that aspect of iframe. 👍🏾

Gaming

Programming

Height iframe