Map window doesn't resize upon initial load in IE 8

AndrewBrown1 · ‎04-01-2013

Due to contractual requirements, our Javascript web mapping application needs to work properly with Internet Explorer (sad, I know).

Anyhow, in IE 8, upon initial load of the application, the map doesn't resize properly to fill the entire map window.

After investigating the HTML code in IE8, it appears that the div class "layersDiv" and id "map_layers" has a default height and width of 400px. If I look at it in Chrome or FireFox, there isn't a height/width set in the code.

How can I remove the default height/width of 400px for the layersDiv window in IE8?

If I turn on compatibility mode in IE8, the window resizes properly upon load.

In my css code, I set #map to:
height:100% !important;
width:100% !important;

There isn't anything in my code anywhere that sets the default height/width of class="layersDiv" or id="map_layers" to 400px. What gives?

Edit: I have this inserted at the top of my webpage, above the title:

<html xmlns="http://www.w3.org/1999/xhtml" runat="server">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

Thanks,
Andrew

Arifakyol · ‎04-02-2013

try this:

function initMap() {
    ...
    ...
    resizeMap();
    ...
    ...
}

function resizeMap() {
            if (map) {
                var myWidth;
                var myHeight;
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                }
                else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                }
                else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                }
                //resize map section
                var a = myHeight - 128;
                $('#map').css("height", a);
                $('#map').css("width", "auto");
                document.getElementById("mapcontent").style.height = myHeight - 120 + "px";
                map.reposition();
                map.resize();
            }
        }

Arifakyol · ‎04-02-2013

by the way....

if you want to use both in pc (ie browser) and mobile etc. you can handle OrientationChange like iphone, just try this:

<script type="text/javascript">
        dojo.require("esri.map");
        var map;
        dojo.addOnLoad(initMap);

        function initMap() {
             ...
             ...
             map = new esri.Map("map",{.....});
             ...
             ...
             resizeMap();
             ...
             ...
        }
        window.onresize = function () {
            if (map) { resizeMap(); }
        }