nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

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

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

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(); }
        }

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();
            }
        }

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.