Map Does Not Display When Div is Inside Another Div

chuckfrank · ‎10-18-2016

Hello All,

I'm using the 4.1 sample and noticing that the map will not load when the Div is inside of another div. See the html below. It's basically the sample from Getting Started: Get started with MapView - Create a 2D map | ArcGIS API for JavaScript 4.1 Do I need to change something? This worked in earlier versions.

<body>
   <div>
      <div>
         <h1>Stations Map</h1>
      </div>
      <div id="viewDiv">
      </div>
   </div>
</body>

Thanks,

Chuck

RobertScheitlin__GISP · ‎10-19-2016

Chuck,

I am not sure what has changed but the workaround is to specify a height to the view parent div:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.1</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]
      });

    });
  </script>
</head>

<body>
   <div style="height:90%">
      <div>
         <h1>Stations Map</h1>
      </div>
      <div id="viewDiv">
      </div>
   </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Maybe

odoe‌

Can shed some light on this.

chuckfrank · ‎10-19-2016

Thanks Robert,

The workaround is helping. Thanks for the advice. I'll check back to see if there is any other information.

ReneRubalcava · ‎10-19-2016

This behavior should be the same as 4.0. In the beta releases it may have differed as the Views would automatically try to fill the page unless specified otherwise, but that was switched around to simplify map placement in 4.0.

Basically, the inner div of #viewDiv has 100% width/height, but it's parent div does not. So as Robert showed, you just need to apply something to the parent div that the child div could expand to.

RobertScheitlin__GISP · ‎10-19-2016

Rene if you switch the code to 4.0 it sizes without the height set in the parent div...

ReneRubalcava · ‎10-20-2016

Odd, I can't get 4.0 to resize automatically on my Mac, maybe it's a browser issue. I'll ask someone to check it out.

KyleDunaway1 · ‎06-26-2017

This is still an issue in 4.3, see the example below. (using bootstrap)

Edit: Maybe "issue" wasn't the correct word. Is this now the standard requirement for a map?

If I have a map embedded 5 divs down, does every parent need a css height value?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- ArcGIS JS 4.3 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <!-- Custom -->
  <link rel="stylesheet" href="css/index.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="col-xs-4 col-xs-offset-1">
      <div id="mapDiv1"></div>
    </div>

    <div class="col-xs-4 col-xs-offset-2">
      <div id="mapDiv2"></div>
    </div>
  </div>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <!-- Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- ArcGIS JS 4.3 -->
  <script src="https://js.arcgis.com/4.3/"></script>
  <!-- Custom -->
  <script src="js/index.js"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(
      Map, 
      MapView
    ){

      var map1 = new Map({
        basemap: "streets"
      });

      var map2 = new Map({
        basemap: "streets"
      });

      var view1 = new MapView({
        container: "mapDiv1",
        map: map1,
        zoom: 4,
        center: [15, 65]
      });

      var view2 = new MapView({
        container: "mapDiv2",
        map: map2,
        zoom: 4,
        center: [15, 65]
      });

      $(document).ready(function(e) {
        console.log("document loaded");
      });
    });
  </script>

  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍