Map not filling div element on initial page load

[MartinAshmore]

Hi,

I'm just getting to grips with the javascript api, and in particular the AMD coding style.

I have a simple page that I am rewriting in AMD style, everything works, but except the map only displays in half the available space. Doing anything to the browser e.g. zooming in (in the browser, not the map), or re sizing the window, causes the map element to display correctly filling the page. I believe this is due to the dom not being ready when the map loads, but is ready when the page is re sized.

I am using "dojo/domReady!" in my initial require[] statement, so I cant see why the dom isnt ready. However to complicate things, I tried including a "dojo/ready" function which should also monitor when the dom loads, this the function simply triggered an alert box message, but the function never fires:(

If any one has any suggestions how to resolve this, that would be great.

This page is being viewed in IE 11.

[LuciHawkins]

Martin,

You can debug in IE11 by pressing the F12 key on your keyboard and looking through the debugger.  I noticed you are using an old API.  When I debugged it in Firefox, it said that InfoTemplate could not be found.  I changed to the version 3.5 of the API and did not receive that error but could not debug any further because I did not have your custom css file or access to your maps at http://svarc/...

Thanks,

Luci

[MartinAshmore]

Hi Luci,

Thanks for the pointers.

I have pasted the contents of the css file at the end.

As you might of guessed my coding ability is pretty limited, so any help is greatly appreciated. At the moment I am basically hashing together sample pages and some examples from a course.

I have updated my javascript api to 3.10 <script src="http://js.arcgis.com/3.10/"></script>

Thanks again.

Martin.

/*Missing CSS file referenced in index.html*/

html, body {

  height: 100%;

  width: 100%;

  margin: 0;

  padding: 0;

}

body {

  background-color: white;

  overflow: hidden;

  font-family: "Kimberley", sans-serif;

}

#mainDiv {

  width: 100%;

  height: 100%;

}

#headerDiv {

  margin: 2px;

  padding-top: 6px;

  padding-right: 20px;

  background-color: #929761;

  color: #421b14;

  border: solid 2px #79663b;

  height: 55px;

  text-align: left;

  font-size: 18pt;

  font-weight: bold;

}

#footerDiv {

  margin: 2px;

  padding: 2px;

  background-color: white;

  color: #2a3537;

  border: solid 2px #79663b;

  font-size: 10pt;

  text-align: center;

  height: 30px;

}

#rightDiv {

  margin: 3px;

  padding: 10px;

  background-color: white;

  color: #421b14;

  border: solid 2px #79663b;

  width: 150px;

  overflow: auto;

}

#leftDiv {

  margin: 3px;

  padding: 5px;

  width: 150px;

  color: #3C1700;

  background-color: white;

  border: solid 2px #79663b;

}

#mapDiv {

  margin: 3px;

  padding: 1px;

  border: solid 2px #79663b;

}

.esriLegendServiceLabel {

  display: none;

}

.esriLegendLayerLabel {

  display: none;

}

.shadow {

  -o-border-radius: 6px;

  -webkit-border-radius: 6px;

  box-shadow: 8px 8px 16px #323834;

  -webkit-box-shadow: 8px 8px 16px #323834;

  -o-box-shadow: 8px 8px 16px #323834;

}

.nihilo .dijitAccordionText {

  margin-left: 4px;

  margin-right: 4px;

  color: #5c8503;

}

[TimWitt2]

Hey Martin,

looking at your code, you still mix a lot of AMD and Legacy. Maybe this blog post can help you.

Also I have noticed you are missing the following in your require ""dojo/on" and "dojo/dom" with the corresponding on and dom in your function.

I hope this helps at least a bit!

Tim

[MartinAshmore]

Hi Tim,

Thanks for your response and pointers.

I've only tinkered with a bit of javascript, and I'm finding dojo quite confusing. The blog post is really helpful, the AMD style of coding dosent seem as intuitive to me, but the blog has answered a couple of niggles I had straight away.

Your help is greatly appreciated,

Martin

[RobertScheitlin__GISP · Accepted solution]

Martin,

  In your CSS try adding height and width to your mapDiv and remove the padding

#mapDiv {
  margin: 3px;
  border: solid 2px #79663b;
  height: inherit;
  width: inherit;
}

[MartinAshmore]

Hi Robert,

That's fixed it, many thanks and much kudos your way!

I have to admit I don't quite understand why it has fixed it. I had partially rewritten the page from a previous one that was written in the legacy style. The old page using dojo.addOnLoad(init); style and the same css loaded with the map full screen?!

Thanks again,

Martin

[RobertScheitlin__GISP]

Martin,

   It is all a timing issue really. Things happen in a different timing order in the legacy code.