<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/soria/soria.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/SoriaGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel="stylesheet" href="Content/layout.css"> <script> // Instead of using data-dojo-config, we???re creating a dojoConfig object // *before* we load dojo.js; they???re functionally identical. var dojoConfig = { async: true, // This code registers the correct location of the "demo" package // so we can load Dojo from the CDN whilst still being able to // load local modules paths: { extras: location.pathname.replace(/\/[^/]*$/, '') + "/scripts/dojo" } }; </script> <script src="http://js.arcgis.com/3.7/"></script> <script> // dojo.require("dijit.layout.BorderContainer"); //dojo.require("dijit.layout.ContentPane"); //dojo.require("esri.map"); //dojo.require("esri.IdentityManager"); //dojo.require("esri.arcgis.utils"); var map; require(["esri/map","dojo/domReady!"], function (Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); dojo.byId("title").innerHTML = "Right Side Demo"; // mapDeferred.then(function (response) { // map = response.map; // dojo.byId("title").innerHTML = response.itemInfo.item.title; // dojo.byId("dataSource").innerHTML = "<a target='_blank' href='http://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>"; //}, function (error) { // console.log("Map creation failed: ", dojo.toJson(error)); // }); }) //show map on load // dojo.ready(init); </script> </head> <body class="soria"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'top'"> <div id="title"></div> </div> <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'center'"> </div> <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners" data-dojo-props="region:'right',splitter:'true'"> Right section </div> <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"> <span id="dataSource"></span> </div> </div> </body> </html>Solved! Go to Solution.
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners" data-dojo-props="region:'right', style: 'width:350px;', minSize: 350, splitter:'true'"> Right section </div>
<!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">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="Content/layout.css">
<script>
// Instead of using data-dojo-config, we�??re creating a dojoConfig object
// *before* we load dojo.js; they�??re functionally identical.
var dojoConfig = {
parseOnLoad: true,
// This code registers the correct location of the "demo" package
// so we can load Dojo from the CDN whilst still being able to
// load local modules
paths: {
extras: location.pathname.replace(/\/[^/]*$/, '') + "/scripts/dojo"
}
};
</script>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.IdentityManager");
dojo.require("esri.arcgis.utils");
var mapView;
function init() {
console.log("Initializing");
}
//show map on load
dojo.ready(init);
</script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function (Map) {
map = new Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});
</script>
</head>
<body class="soria">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
data-dojo-props="region:'top'">
<div id="title"></div>
</div>
<div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
data-dojo-props="region:'right',splitter:'true'">
Right section
</div>
<div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'bottom'">
<span id="dataSource"></span>
</div>
</div>
</body>
</html>