search

iwannabebot / ng-gist

AOT/JIT compatible Angular component to embed Gist
MIT License
4 stars 3 forks source link

Gist height not dynamic #2

Open dianjuar opened 6 years ago

dianjuar commented 6 years ago

The height of the iframe that holds the gist is not enough to hold it.

image

dianjuar commented 6 years ago

This is related with the #1.

After the iframe loads you can adjust its height dynamically based on its content with 

<iframe src="..." frameborder="0" scrolling="no" onload="onIframeLoad(this)" />
function onIframeLoad(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

StackOverflow answer

iwannabebot commented 6 years ago

This looks good for firefox. cannot verify in Chrome/Edge/Opera/IE 11.

@dianjuar You can forward a PR if you find anything better than the above solution.

pankajparkar commented 6 years ago

@dianjuar the answer that you linked would not work if the iframe has different domain. Because of security constraint you can't access document/window of iframe object from iframe host window.

dianjuar commented 6 years ago

Sorry @pankajparkar but I implement that on a pet project https://github.com/bikecoders/SoccerTournamentManager/blob/master/src/app/stats/stats.component.ts#L73-L84 You can view it here

pankajparkar commented 6 years ago

@dianjuar This does work because iframe don't have any src so it is considered as on same domain. That's why this works perfectly. I think I was overthinking this scenario.