AnsweredAssumed Answered

How to properly resize map from hidden iframe

Question asked by jcarney_voicenet on May 26, 2014
Latest reply on Jul 17, 2015 by bsvensson-esristaff
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);
    }

Outcomes