AnsweredAssumed Answered

Zooming and Centering issues with map in Content Pane

Question asked by BritishSteel on Oct 24, 2013
Latest reply on Nov 10, 2014 by jaws44
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) {
  <!--------create main map---------------------------------------------------> 
  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]

Outcomes