AnsweredAssumed Answered

content pane misplaced in border layout

Question asked by JZhangGDOT on Apr 29, 2017
Latest reply on May 4, 2017 by JZhangGDOT

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="//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"> <!--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="https://js.arcgis.com/3.20/"></script>


<script>
dojo.require("dijit.dijit");
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map"], function (Parser, BorderContainer, ContentPane, Map) {
var map = new Map("mapDiv", {
basemap: "gray",
center: [-87.65, 41.85],
zoom: 12
});
});

</script>
<!--<script src="js/main.js"></script>-->

</head>
<body>
<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: 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>

Attachments

Outcomes