Iframe-resizer: Issue with iframe inside a div with display:none in firefox

[LuizPanariello]

When the iframe begins inside a display none div in firefox the height is not applied to the iFrame. I know that in version 3.0 there is changelog that says that this issue has been fixed but I don't know if that was exacly what the case that you guys are testing.

<div style="display:none">
<iframe src="https://local..."></iframe>
</div>

I'll try to track the problem and commit it.
Thanks

[pscdodd]

Won't the height be zero if display:none and then the default height will be applied?

[LuizPanariello]

Actually no, the parent div should be height:0 and out of the box sizing but when you change the display to block, nothing happens, in chrome, parent height is 0 but iframe is updated with the height and than the parent div when switched to display:block it gets its children size.

[davidjbradshaw]

This is a bug with FireFox that seems to be a bit of a moving target. Have a look at the fixHiddenIFrame function.

[LuizPanariello]

I'm thinking in making a recursive check if all parents are invisible in FireFox... but I don't know if this is the best approach to this problem.

[davidjbradshaw]

Their is code in their that looks for dom mutations and then recalls the resizer if anything changes. I need to find some time to write a proper test case for this to workout why it doesn't always work.

The quick hack is to just call document.getElementById('myIFrame').iframeResizer.resize() when you unhide it.

[psr1410]

Is this issue fixed? I'm still not able to get the height when the parent div is in display:none in firefox and even in IE also. I downloaded the latest version of your iframe resizer plugin.

[LuizPanariello]

Sorry, not yet. I'm still using a fix to get around this problem, but i dont recommend it. It's a complicated problem since you need to check all parents "display" and detect if any is hidden and than update the iframe size depending on that...

[psr1410]

If I use "visibility:hidden" instead of "display:none" It's working fine.

[jonnywhite]

+1 - looking for a fix for this

[jonnywhite]

My workaround for the time being. After calling iFrameResize ...

setTimeout("if($('#myiframe').css('height') == '0px') { $('#myiframe').css('height','1500px'); }",2000);

It just sets the height to 1500px which may be wrong but at least the user sees something and when they click the iframe it readjusts itself anyway.

[davidjbradshaw]

You would be better off calling document.getElementById('myiframe').iframeResizer.resize(); This will force the iFrame to recalc it's size.

[jonnywhite]

If I call that whilst the iframe is inside a hidden div it sets the height to 0 in Firefox. So when the div is unhidden at an undetermined time you can't see the iframe. Currently with the workaround above it just shows it in big which is better than not showing at all.

[coyarzun2013]

i have similar problem, but in my case i try to implement this inside a bootstrap modal(hide div, and trigger pressing a buttton).

[ryana]

@coyarzun2013 I'm running into the exact same thing: iframe inside modal. Did you find a workaround? I'm debating trying to hook into the bs.modal.shown (or whatever it is) event.

[coyarzun2013]

@ryana searching on the net i found a js function that did the work

function resizeModalFrame(idFrame) {
    var isChrome = !!window.chrome && !!window.chrome.webstore;
    if (isChrome) {
        fheight = document.getElementById(idFrame).contentDocument.documentElement.scrollHeight;
    } else {
        fheight = document.getElementById(idFrame).contentWindow.document.body.scrollHeight;
    }
    $('#'+idFrame).css('height', fheight);
}

and as you mention i call the function in bs.modal.shown like this

$('#modal').on('shown.bs.modal', function () {
    resizeModalFrame('mncliente');
});

and the code of iframe inside modal

<div id="modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <button id="hModalNCliente" type="button" class="close" data-dismiss="modal" aria-hidden="true" style="display: none;">&times;</button>           
                <iframe id="mncliente" width="100%" scrolling="no" frameborder="0" src="controllers/manage_cliente.php"> </iframe>
            </div>
        </div>

and thats it. Sorry my bad english.

[gstroup]

It's a hack, but I set opacity to 0 to hide, back to 100% to show.

[droomdre]

The following works for me:
HTML:

<div class="buttonDownload"> PDF Download </div>
<div class="DownloadMail" style="display:none">
<iframe src="test.html" id="iframeDownload" frameborder=0 scrolling="no"></iframe>
</div>

JQUERY:

$('.buttonDownload').click(function(){
 $('.DownloadMail').toggle('slow',function(){
    document.getElementById('iframeDownload').iFrameResizer.resize();
  });            
});

[aleen42]

resizedCallback method has always been fired when parent switch between display: none; and display: block recently in Chrome 65, resulting in wrong data like 14px callback. Why? It is better not to callback resize handler when iframe is not visible. Even if I used :visible pseudo class to try to prvent, iframeResizer still set the iframe with zero height.

[davidjbradshaw]

I've not changed anything, sounds like a bug in Chrome

[aleen42]

@davidjbradshaw Is there a logical process, resulting in setting iframes with a small value of height, when its wrapper div is hidden with display: none? I found that when I tried to set this wrapper element with display: block again, resizedCallback was not called at all in Chrome 65 under some machines. It is so wierd. I create another issue to mark this problem, and hope to solve this with you, even reporting a bug to the Chrominum Discuss Group. (#567)

[davidjbradshaw]

This should be resolved in v4.2.3