0

EDIT: Well this is probably a big part of the issue, it appears my parser is not working. How do I fix that?

enter image description here

I'm using the Javascript API 3.23. For whatever reason, when I create a BorderContainer and put content panes inside, the regions aren't respected, instead they just stack up on each other. I see a lot of old posts use notation like "dijit.layout.BorderContainer" instead of "dijit/layout/BorderContainer" - I am wondering if this is part of my problem? The dojo documentation I read uses slashes instead of periods, I figured the periods are a thing of the past but maybe not. One other thing I noticed was instead of region: 'left' or region: 'right', dojo documentation now states it is region: 'leading' or region: 'trailing' so I am pretty confused...

HTML:

<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'" id="content">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">
        <div id="toolbar-pane">
            //stuff here
        </div>
    </div>
    <div id="leading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'leading'">left</div>
    <div id="mapp" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center</div>
    <div id="trailing" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'trailing'">right</div>
</div>

CSS:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
}
#leading {
width: 500px;
border: 5px solid red;
}
#trailing {
width: 200px;
border: 5px solid blue;
}
#content {
height: 100%;
width: 100%;
}

JS require statement:

require([
"esri/map",
"esri/request",
"esri/arcgis/utils",
"esri/layers/FeatureLayer",
"esri/tasks/Geoprocessor",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/renderers/UniqueValueRenderer",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/InfoTemplate",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/dijit/Legend",
"esri/dijit/PopupTemplate",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane",
"dojo/parser",
"dojo/query",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojox/widget/Standby",
"dojo/domReady!"
],
function (
Map,
esriRequest,
arcgisUtils,
FeatureLayer,
Geoprocessor,
SimpleLineSymbol,
SimpleFillSymbol,
Graphic,
UniqueValueRenderer,
SimpleRenderer,
Color,
InfoTemplate,
Query,
QueryTask,
Legend,
parser,
PopupTemplate,
query,
dom,
domConstruct,
on,
Standby
) {
  parser.parse();

Yields this (don't worry about there being no map, I can make the map show up in the "center" region if I want):

enter image description here

Improve this question

1 Answer 1

Reset to default
1

I had to reorganize my require statement and put dijit/layout/... at the end after the parser and such. I also had to make sure in my CSS that the #content id was set to the same as html and body, essentially this:

require([
    "esri/map",
    "esri/request",
    "esri/arcgis/utils",
    "esri/layers/FeatureLayer",
    "esri/tasks/Geoprocessor",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/graphic",
    "esri/renderers/UniqueValueRenderer",
    "esri/renderers/SimpleRenderer",
    "esri/Color",
    "esri/InfoTemplate",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/dijit/Legend",
    "esri/dijit/PopupTemplate",
    "dojo/query",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/on",
    "dojox/widget/Standby",
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
],
  function(
    Map,
    esriRequest,
    arcgisUtils,
    FeatureLayer,
    Geoprocessor,
    SimpleLineSymbol,
    SimpleFillSymbol,
    Graphic,
    UniqueValueRenderer,
    SimpleRenderer,
    Color,
    InfoTemplate,
    Query,
    QueryTask,
    Legend,
    PopupTemplate,
    query,
    dom,
    domConstruct,
    on,
    Standby,
    parser
  ) {
      parser.parse();

and the CSS:

html, body, #content {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.