Resize Up Issue in IE11

[IglooGary]

Great library, just having a few teething troubles with IE11. On page load using $('iframe').iFrameResize({log: false}); the page presentation is perfect, if I Restore Down the browser, the iframe resizes correctly, yet if I manually widen or Maximize the browser, the page depth does not reduce accordingly causing unnecessary space at the bottom of the page.

If however I use $('iframe').iFrameResize({log: false, autoResize: false, sizeWidth: true}); resizing up is resolved however, if I Restore Down, etc... the iframe depth is reduced obscuring/hiding content.

Maybe I am doing something wrong, if somebody could please let me know what implementation to use to allow the iframe to resize correctly irrespective of how the browser is resized and also ensure no unnceccessary space occurs at the bottom of the page.

Any help would be much appreciated :-)

[IglooGary]

This code resolves my previous issue, its a workround:

    $('iframe').iFrameResize({
        log: false
    });

    function correctHeight() {
        var iFrameId = document.getElementById('iFrameResizer0');

        $(window).resize(function () {
            $(iFrameId).attr('style', 'width: 100%').attr('height', '0px');

            var contentHeight = iFrameId.contentWindow.document.body.scrollHeight + 'px';

            $(iFrameId).attr('height', contentHeight).css('height', contentHeight);
        });
    }

    window.addEventListener("resize", function () {
        correctHeight();
    }, false);

Hope this helps others :-)

[davidjbradshaw]

Have you tried the different height calculation methods?

[IglooGary]

I did, spent quite a few hours with all calculation methods, worked in some ways but not in others, the only way mine would work 100% was with the addition of the code above. If you can suggest a different implementation without my code and just your library I would be happy to try.

[davidjbradshaw]

The library already has the option to do what you code is doing, scrollHeight is one of the height calculation methods. Not much more that I can advise.

[IglooGary]

Unfortunately $('iframe').iFrameResize({log: false, heightCalculationMethod: 'bodyScroll'}); handles iframe depth perfectly well as the browser window is being manually resized down, but as soon as you manually widen the browser window the space at the bottom starts to increase.

[davidjbradshaw]

Does the example have the same issue?

[IglooGary]

Yes it does, if you minimise the browser so you get a scroll bar, refresh the page and then widen the page, watch the space at the bottom of the page, the wider the page, the deeper the white space.

[douglaspetrin]

I have the same problem here. When you click inside the iframe or scroll down, the bottom of the page starts to increase and when it starts to increase it seems going until the infinite.

Did anyone find another solution for this issue?

[midi292]

I'm not sure if this concerns this problem. In my implementation I can change from autoResize true to false. So the user can display the whole iFrame or limit the height. With autoResize=false I switch the scrollbars on, otherwise off again. With IE, however, the scroll bar could not be removed because there was an unwanted gap at the end of the iFrames content. I identified the empty injected clearFix DIV as the cause. After assigning a fixed height (body > div:last-child { height: 1px; }) the problem was fixed. I write the CSS via JS from the parent frame into the head of the iFrame after it has been loaded.

[douglaspetrin]

@midi292 thank you! I stopped the infinite looping within just the autoReize : false and changing the limit of the iframe height.

[davidjbradshaw]

Closing due to IE11 no longer being supported.