topic Map Does Not Display When Div is Inside Another Div in ArcGIS JavaScript Maps SDK Questions

Map Does Not Display When Div is Inside Another Div

chuckfrank — Tue, 18 Oct 2016 20:42:49 GMT

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

Re: Map Does Not Display When Div is Inside Another Div

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:28:04 GMT

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.

Re: Map Does Not Display When Div is Inside Another Div

chuckfrank — Wed, 19 Oct 2016 16:04:35 GMT

Thanks Robert,

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

Re: Map Does Not Display When Div is Inside Another Div

ReneRubalcava — Wed, 19 Oct 2016 23:33:16 GMT

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.

Re: Map Does Not Display When Div is Inside Another Div

RobertScheitlin__GISP — Thu, 20 Oct 2016 00:21:36 GMT

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

Re: Map Does Not Display When Div is Inside Another Div

ReneRubalcava — Thu, 20 Oct 2016 20:44:57 GMT

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.

Re: Map Does Not Display When Div is Inside Another Div

KyleDunaway1 — Sun, 12 Dec 2021 06:28:07 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍