Hi everyone, my map is not centering correctly in the right content pane. As you can see when you open it you cannot see the Esri logo or the data sources in the lower right. It also does not let you use ???SHIFT + draw box??? correctly. The cursor and the box will be far apart. I have fiddled with the CSS and although I sometimes get the whole map to show up it will never let me zoom correctly and it will not look exactly centered. When I resize my browser and go back to full mode it will work and look fine. Hm? Do I need to call a specific method on my map after the application loads? Thank you. [HTML] A Title html, body, #mapDiv { width: 100%; height: 100%; margin: 0; overflow: hidden; } #mapDiv{ width: 100%; height: 100%; } #borderContainer { width: 100%; height: 100%; } #mainWindow{ width: 100%; height: 100%; } #leftPane { width: 20%; } var dojoConfig = { parseOnLoad : true }; require([ "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "esri/map", "dojo/on", "dojo/dom", "dojo/dom-class", "dojo/dom-construct", "dojo/domReady!"], function( BorderContainer, TabContainer, ContentPane, Map, dom, domClass, domConstruct) { var mainMap = new Map("mapDiv", { basemap : "topo", center : [-118.161, 33.8045], zoom : 10, sliderStyle: "small", }); }); Welcome [/HTML]

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zooming and Centering issues with map in Content Pane

NumaGremling

Hi everyone,

my map is not centering correctly in the right content pane. As you can see when you open it you cannot see the Esri logo or the data sources in the lower right. It also does not let you use ???SHIFT + draw box??? correctly. The cursor and the box will be far apart. I have fiddled with the CSS and although I sometimes get the whole map to show up it will never let me zoom correctly and it will not look exactly centered.

When I resize my browser and go back to full mode it will work and look fine. Hm? Do I need to call a specific method on my map after the application loads?

Thank you.

[HTML] <head>
<title>A Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">

<style>
   html, body, #mapDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
   }

   #mapDiv{
    width: 100%;
    height: 100%;
   }

   #borderContainer {
    width: 100%;
    height: 100%;
   }

   #mainWindow{
    width: 100%;
    height: 100%;
   }

   #leftPane {
    width: 20%;
   }


</style>

<script>
   var dojoConfig = {
    parseOnLoad : true
   };
</script>
<script src="http://js.arcgis.com/3.7/"></script>

<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"esri/map",

"dojo/on",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/domReady!"],

function(
BorderContainer,
TabContainer,
ContentPane,
Map,

dom,
domClass,
domConstruct) {

var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
});


});


</script>
<body class="claro">

   <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">

    <div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
     <div id="title">Welcome</div>
    </div>

    <div id="mainWindow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
     <div id="mapDiv"></div>
    </div>

    <div id="leftPane"data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region: 'left'">
     <div id="tabcontainerDIV"></div>
    </div>
   </div>
</body>[/HTML]

Vind meer berichten getagd met

Accepted answers

All comments

BenFousek

There's a couple issue with your layout.

1) Only html, body and the border container should be width:100%; height:100%;.

2) Use the center region as the map div. You don't need an extra div. The center region auto sizes itself. You can use any layout widget for a region.

[HTML]<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">
<div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
    <div id="title">Welcome</div>
</div>
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="leftPane"data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true,region: 'left'">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">
      Tab One
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
      Tab Two
    </div>
</div>
</div>[/HTML]

html, body {
width:100%;
height:100%;
}

#leftPane {
width:20%
}

#mapDiv {
padding:0;
overflow: hidden;
}

3) Always resize the border container last in your function. This is particularly important when adding widgets programmatically, like another tab in the tab container. It will ensure the layout is correct.

dijit.byId('borderContainer').resize();

See if that doesn't make your problems cease.

NumaGremling

Thank you for the clarifications.

I have changed my script based upon your suggestions, and it looks like the following now. Can you check if that is correct?

[HTML]
<head>
<title>A Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">

<style>
   html, body, #borderContainer {
    width: 100%;
    height: 100%;
   }

   #leftPane {
    width: 20%;
   }

   #mapDiv{
    padding: 0;
    overflow: hidden;
   }

</style>

<script>
   var dojoConfig = {parseOnLoad : true};
</script>
<script src="http://js.arcgis.com/3.7/"></script>

<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"esri/map",

"dojo/on",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/domReady!"],

function(
BorderContainer,
TabContainer,
ContentPane,
Map,
registry,

dom,
domClass,
domConstruct) {

var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
});

});


</script>
<body class="claro">

   <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true, liveSplitters:true">

    <div id="header" data-dojo-props="region:'top'" data-dojo-type="dijit/layout/ContentPane">
     <div id="title">Welcome</div>
    </div>

    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>

    <div id="leftPane"data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region: 'left'">

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1'">
       Tab One
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
       Tab Two
     </div>

    </div>
   </div>
</body>
[/HTML]

I am struggling with adding dijit.byId('borderContainer').resize(); to my code.

I would have to add it right here, right?

  <!--------create main map--------------------------------------------------->  
  var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
  });      
    dijit.byId('borderContainer').resize();
 });
  <!---------

If I do so the whole layout gets messed up.

BenFousek

You have dijit/registry loaded use registry.byId(). I doubt resizing the bc is causing the problem. Does it happen w/o resizing?

What css is being loaded from css/layout.css? You could be causing problems if your original css is being used.

NumaGremling

Here is my script.

 require([
  "dijit/layout/BorderContainer",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",
  "esri/map",
  "dijit/registry",
   
  "dojo/on",
  "dojo/dom",
  "dojo/dom-class",
  "dojo/dom-construct",
  "dojo/domReady!"],
  
 function(
  BorderContainer,
  TabContainer,
  ContentPane,
  Map,
  registry,
  
  dom,
  domClass,
  domConstruct) {
  <!--------create main map--------------------------------------------------->  
  var mainMap = new Map("mapDiv", {
   basemap : "topo",
   center : [-118.161, 33.8045],
   zoom : 10,
   sliderStyle: "small",
  });
  
  var borderCont = registry.byId("borderContainer");
  borderCont.resize();
 });
  <!---------------------------------------------------------------------------->

If I add both lines that grab the container and resize it then my page will look as follows:

[ATTACH=CONFIG]28588[/ATTACH]

When I remove these lines it will look like this:

[ATTACH=CONFIG]28589[/ATTACH]

Now, I just noticed that if I do anything that modifies the screen size it will refresh and look fine. I mentioned resizing before but now I realized that if I pull up the Search window with CTRL + F or remove it, then the map will redraw too.

The initial page I used was using

 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css">

But I changed that to claro:

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css">

Either way it will give me the same issues.

BorderContainer2.jpg

BorderContainer.jpg

JasonJaworski

Was this question ever answered? I am having the same issue and can't figure it out. The Powered by Esri logo doesn't appear and I am having a cursor offset issue when my map loads. If I resize the window, everything is fixed and it works great. is there some kind of map.reposition function I need to run or something like that?

kenbuja

This is the code that has been recommended to use in other posts

map.on("load", function () {
    registry.byId("divMap").on("resize", function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            map.resize();
            map.reposition();
        }, 500);
    });
});

JasonJaworski

Thank you!

map.resize(); and

map.reposition(); did the trick for me!

View the full discussion

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.