topic Layout with right pane does not work for me in ArcGIS JavaScript Maps SDK Questions

Layout with right pane does not work for me

KenBowen1 — Thu, 10 Oct 2013 16:04:41 GMT

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>

Re: Layout with right pane does not work for me

BenFousek — Sat, 11 Dec 2021 13:52:42 GMT

Try setting a width on the right pane. Because you are using a splitter also set the minSize property. minSize is an integer of pixels.

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

Re: Layout with right pane does not work for me

LoriGonzalez — Thu, 10 Oct 2013 16:34:24 GMT

Don't forget to include parseOnLoad:true in your dojoConfig

<script>var dojoConfig = { parseOnLoad: true };</script>

Re: Layout with right pane does not work for me

JonathanUihlein — Thu, 10 Oct 2013 16:40:35 GMT

Need more info.

What are the error messages you get in the console?

If no error messages show up, try to identify *where* the error is happening and wrap that code in a try/catch.

You should then see an error message.
Post it/them here and I can take a look.

If you still can't produce any error messages, recreate your page in a http://jsfiddle.net/ so we can work with your code directly.

Re: Layout with right pane does not work for me

KenBowen1 — Sat, 11 Dec 2021 13:52:44 GMT

Thanks for the offers and the ideas. The problem was actually with the parseOnLoad: true as one person suggested and that configuration parameter is apparently incompatible with async: true. When I added parseOnLoad the dijit requires started loading however I was still having the same layout error. Then I started from scratch and built the layout up and found the problem with async in the configuration. I am too new at this to know why this is so. Working example is 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">
    <!--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>

Re: Layout with right pane does not work for me

Reynaldde_Castro — Wed, 18 Dec 2013 21:20:29 GMT

I'm going the other direction. I'm switching to Bootstrap. Were you able to get the layout working with Bootstrap 3 and IE8 without scrollbars on the browser?