Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Width downsizing not working
See original GitHub issueHow do you prevent the iframe from growing unbounded? It seems easy to cause this problem, especially with width but also with height. Below is a simple minimal example - pressing ‘go’ toggles on/off a div appearing far to the right, but once it appears, the width never reverts back to its original size.
I think this is because of the following feedback loop:
- divs are width:100% of the parent document body whose width is 100% of the iframe.
- iFrameResizer makes the iframe width in turn determined by the document contents.
I’m hoping there’s a way to match the behavior in a normal iframe or viewport, where there’s a “viewport size” that the document body width reverts to once it’s no longer propped wider by the .c div. (Of course, without actually clipping the content to that “viewport size.”) Am I making sense? Is there a way to accomplish this?
index.html:
<script src="iframeResizer.min.js"></script>
<iframe src="child.html" scrolling="no"></iframe>
<script>
iFrameResize({ sizeWidth: true }, document.querySelector("iframe"));
</script>
child.html:
<!DOCTYPE html>
<html>
<body>
<script src="iframeResizer.contentWindow.min.js"></script>
<script>
function go() {
if (document.querySelector(".c").style.display === "block") {
document.querySelector(".c").style.display = "none";
} else {
document.querySelector(".c").style.display = "block";
}
}
</script>
<button onclick="go()">go</button>
<div
class="c"
style="height: 50px; width:10px; left: 500px; position: absolute; display: none; background: black;"
>
hello
</div>
<div style="height: 500px; width:100%; background: silver;">hello</div>
</body>
</html>
(I’d be happy to move this into a jsfiddle or codepen, but I wasn’t sure how to get iframes to work in them.)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:13 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I just had this same issue with the iframe height not downsizing, and it turned out to be CSS on the child content. The body element had height: 100% applied to it. Once I set that to auto, the downsizing worked.
Thank you for iframe-resizer. It was dreamy how well it worked on the first try.