AnsweredAssumed Answered

Layout with right pane does not work for me

Question asked by kbowen8203 on Oct 10, 2013
Latest reply on Dec 18, 2013 by rdecastro
I started to replace my bootstrap layout with the suggested layout examples using dojo but not having much luck.
I started with "Layout with right pane, map data from ArcGIS.com". The live link works in my browser but when I transfer it to my localhost server it fails to display anything.  I downloaded the layout.css file and that is loading. In both the online example and on my localhost the SoriaGrid.css resource fails to load but I assume that is OK (but should be changed in the demo). 

I have attempted to merge my code with the example. In my best attempt I get the right pane at the bottom.  My code is shown below and I could use a pointer where the layout has gone wrong.  I am guessing that I am requiring the dijit resources incorrectly but I cannot figure out the syntax for including them. In my worst attempt I get no reference to dojo at the dojo.require lines.


I am using chrome as the browser.


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

Outcomes