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