Bottom half of JS web map application missing

[SachinChand]

Having an issue where the bottom half of a javascript web map[ATTACH=CONFIG]29216[/ATTACH] application is missing.  I have checked the ArcGIS map services and they are functioning properly.  I'm not a JS developer and am not sure what the issue could be.  Any suggestion on what the cause could be?  I've attached a screenshot of the application where you can see the bottom half missing.

[JakeSkinner]

Hi Sachin,

Make sure you have the height set to 100% for the <div> containing the map.  Example of CSS file:

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

Example of HTML file:

<div id="divMap" style="height:100%; width:100%;"></div>

[SachinChand]

Skin, thanks for the response.  Those settings are set to 100%.  I'm seeing now that the issue exists on Firefox (v25) and Chrome (v31.0.1650.57 m) but the application works fine on IE.

[JakeSkinner]

Can you paste the code you are using?  Don't forget to enclose it in CODE tags.

[JohnathanBarclay]

Have you added a map resize function?

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

This resizes the map when the containing div resizes, but the map was not sizing correctly on load for me either until I added this.

You will need to have "dojo/aspect" loaded for it to work.

[SachinChand]

Thank you for the responses.  The issue is occurring in Firefox and Chrome.  In IE, the map displays fine.  I'm working with the developer on the issue and will report back as to the cause.

[JianHuang]

This should be caused by missing CSS. Please check if you have all the neccessary CSS files imported.