topic Re: ArcGIS Javascript 4.0 and Bootstrap problem in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript 4.0 and Bootstrap problem

KyleDunaway — Fri, 03 Jun 2016 23:03:15 GMT

I cant seem to load a basic webmap into a bootstrap div.

</div>

No map, any ideas? Is there some conflict with 4.0 and bootstrap?

Re: ArcGIS Javascript 4.0 and Bootstrap problem

RickeyFight — Fri, 03 Jun 2016 23:28:26 GMT

Can you post the rest of your code or a sample that is similar?

Re: ArcGIS Javascript 4.0 and Bootstrap problem

KyleDunaway — Sat, 11 Dec 2021 17:33:19 GMT

All I did was add bootstrap/jquery and inclose the view container 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</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 4,  // Sets the zoom level based on level of detail (LOD)
    center: [15, 65]  // Sets the center point of view in lon/lat
  });
});
</script>
</head>
<body>
  <div class="row">
    <div class="col-sm-12">
      <div id="viewDiv"></div>
    </div>
  </div>
</body>
</html>

Re: ArcGIS Javascript 4.0 and Bootstrap problem

FC_Basson — Mon, 06 Jun 2016 06:03:17 GMT

Specify a CSS height attribute for the viewDiv container.

Re: ArcGIS Javascript 4.0 and Bootstrap problem

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:33:22 GMT

Kyle,

Not sure why you would want to use bootstrap grid when you only have a one row one column layout but here is your code fixed for that:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Get started with MapView - Create a 2D map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
    <script src="https://js.arcgis.com/4.0/"></script>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/dom-style",
            "dojo/domReady!"
        ], function(Map, MapView, domStyle) {
            var map = new Map({
                basemap: "streets"
            });
            var view = new MapView({
                container: "viewDiv", // Reference to the scene div created in step 5
                map: map, // Reference to the map object created before the scene
                zoom: 4, // Sets the zoom level based on level of detail (LOD)
                center: [15, 65] // Sets the center point of view in lon/lat
            });

            domStyle.set("viewDiv", "height", getPageHeight() + "px");

            function getPageHeight() {
                var body = document.body,
                    html = document.documentElement;
                var height = Math.max(body.scrollHeight, body.offsetHeight,
                    html.clientHeight, html.scrollHeight, html.offsetHeight);
                return height;
            }
        });
    </script>
</head>

<body>
    <div class="row nopadding">
        <div class="col-md-12 nopadding">
            <div id="viewDiv"></div>
        </div>
    </div>
</body>

</html>

Re: ArcGIS Javascript 4.0 and Bootstrap problem

KyleDunaway — Mon, 06 Jun 2016 20:04:57 GMT

The 1 row/1 column was just an example. Change it to 2 columns and it performs the same way. Adding a height to the div used for the map container has solved it.

Re: ArcGIS Javascript 4.0 and Bootstrap problem

KyleDunaway — Mon, 06 Jun 2016 20:05:19 GMT

Thank you.