How to properly resize map from hidden iframe

[JuliaCarney]

Hello,

We have a map that is initialized while in a hidden iframe, which opens up when the user clicks a button. Within the iframe page, the map div is surrounded by a header with a tool bar, and a legend pane on the left. The map worked fine in its own page, including resizing, but when the map is opened from the hidden iframe, the map div is about a quarter of the width it should be. If we had a map at 100% of the iframe page that loaded fine no matter what. We struggled for hours with the CSS without being able to solve this, then finally I set a timer to manually calculate the new width and height which worked.

Has anyone encountered this who may have advice on how to solve this more elegantly? I assume that the issue is that the map div initializes to a weird size while the iframe is hidden, but I don't understand why after it opens it can't resize normally, since it handles normal window resizes perfectly fine. Thanks for any help you might have!

var resizeTimeout;
    $(window).resize(function() {
        resizeTimeout = setTimeout(fncMapSize, 100);
    });
    $(window).load(function() {
        resizeTimeout = setTimeout(fncMapSize, 100);
    });

    function fncMapSize() {
        var windowwidth = $(window).width();
        var windowheight = $(window).height();
        var newwidth = windowwidth - $("#leftPane").width();
        var newheight = windowheight - $("#header").height();
        $('#map').css({
            "width" : newwidth,
            "height" : newheight
        });
        $('#mainWindow').css({
            "width" : windowwidth,
            "height" : windowheight
        });
        map.resize();
        map.reposition();
        clearTimeout(resizeTimeout);
    }

[JuliaCarney · Accepted solution]

I don't know if anyone will ever read this, but in the end I did something similar to what I posted below with a twist that made everything run more consistently. In the event that occurs after the resize and timer is up, I resized just the map div, then I instantiated my map and all my other map functions inside that event as well. That meant I could set the map autoResize to true, which allowed it to resize itself normally once the iframe had been opened.

[BjornSvensson]

FYI: the 3.14 have several fixes regarding map resizing, I think that includes fixing the issue posted here.