content pane misplaced in border layout

Jun_ChengZhang · ‎04-29-2017

Hi, I am trying to build a web page to display map and legend / some of my custom widgets that I planed. currently the map and custom widget show up ok, but I use border layout and try to put map in the left and leave a place in right panel and will put legend and my custom widget in it. But two content pane always on top of each other even though I specified region is "center" and "right".

Can anyone point out for me what I did wrong here. I appreciate any of input. See the codes below.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>ArcGIS API Try out</title>
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.18/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="css/Geocoder.css">
<link rel="stylesheet" type="text/css" href="css/IncidentSearch.css"> 
<style>
html, body {width: 100%; height: 100%; margin: 0; overflow: hidden; }
#mapDiv {padding: 0;}
#rightPanel {border-left: solid 2px #ccc;}
#borderContainer {width: 100%;height: 100%;}
</style>
<script type="text/javascript">
var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
var dojoConfig = {
// The locationPath logic below may look confusing but all its doing is
// enabling us to load the api from a CDN and load local modules from the correct location.
packages: [{
name: "application",
location: package_path + '/js'
}]
};
</script>
<script src="https://js.arcgis.com/3.20/"></script>

</script>

</head>
<body>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" id="borderContainer">

<div id="rightpanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'right'" style="width: 300px; background-color:lightgray">
<div id="IncidentSearchDiv"><p>This will put my own custom widgets and legend. How to make this entire content pane stay in the right side</p><br />
<br />How to get rid of the extra "Zoom in / Zoom out" text on the map

</div>

</div>

</div>
</body>
</html>

RobertScheitlin__GISP · ‎04-29-2017

Jun,

This should help:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API Try out</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="css/Geocoder.css">
  <link rel="stylesheet" type="text/css" href="css/IncidentSearch.css">
  <!--add this line will enable this css been recoganized in widget-->
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    #mapDiv {
      padding: 0;
    }

    #rightPanel {
      border-left: solid 2px #ccc;
    }

    #borderContainer {
      width: 100%;
      height: 100%;
    }
  </style>
  <script type="text/javascript">
    var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    var dojoConfig = {
      // The locationPath logic below may look confusing but all its doing is
      // enabling us to load the api from a CDN and load local modules from the correct location.
      packages: [{
        name: "application",
        location: package_path + '/js'
      }]
    };
  </script>
  <script src="http://js.arcgis.com/3.20/"></script>

  <script>
    require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojo/domReady!"
    ],
    function(
      parser, BorderContainer, ContentPane
    ) {
      parser.parse();
    });
  </script>
  <script src="js/main.js"></script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" id="borderContainer">
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'"></div>
    <div id="rightpanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'right'" style="width: 100px;">
      <div id="IncidentSearchDiv"></div>
    </div>
  </div>
</body>

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

View solution in original post

RobertScheitlin__GISP · ‎04-29-2017

Jun,

This should help:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API Try out</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="css/Geocoder.css">
  <link rel="stylesheet" type="text/css" href="css/IncidentSearch.css">
  <!--add this line will enable this css been recoganized in widget-->
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    #mapDiv {
      padding: 0;
    }

    #rightPanel {
      border-left: solid 2px #ccc;
    }

    #borderContainer {
      width: 100%;
      height: 100%;
    }
  </style>
  <script type="text/javascript">
    var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    var dojoConfig = {
      // The locationPath logic below may look confusing but all its doing is
      // enabling us to load the api from a CDN and load local modules from the correct location.
      packages: [{
        name: "application",
        location: package_path + '/js'
      }]
    };
  </script>
  <script src="http://js.arcgis.com/3.20/"></script>

  <script>
    require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojo/domReady!"
    ],
    function(
      parser, BorderContainer, ContentPane
    ) {
      parser.parse();
    });
  </script>
  <script src="js/main.js"></script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" id="borderContainer">
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'"></div>
    <div id="rightpanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'right'" style="width: 100px;">
      <div id="IncidentSearchDiv"></div>
    </div>
  </div>
</body>

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

Jun_ChengZhang · ‎05-04-2017

Thank you Robert, that works!

I appropriate your help.

Jun Cheng