mvanderveeken

esri.map in MVC4 (Razor) to full screen

Discussion created by mvanderveeken on Jan 16, 2013
Latest reply on Jan 17, 2013 by jacobsj
I'm very new to ESRI and the Javascript API in general, so please excuse if this is an easy question :)

I'm learning the Javascript API, and I'm trying to embed a map in an MVC4 view. The issue I'm experiencing is that the map seems to be a fixed size (specifically, a fixed height). I can change it to a different absolute height, but not to a dynamic height (i.e. 100%). If I create a simple HTML page using (what seems to be) the same code, it works.

MVC View (fixed height)
@{
    ViewBag.Title = "Home";
}
@section scripts
{

   <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
   <script type="text/javascript">
       dojo.require("esri.map");
       var map;
       function init() {
           alert('hello!');
           map = new esri.Map("map", {
               basemap: "streets",
               center: [4.830088, 52.665051], //long, lat
               zoom: 4,
               sliderStyle: "small",
              
           });
       
       }
       dojo.ready(init);
   </script>

}
<h3>Hello World!</h3>
<div id="map" class="claro" style="height:100%">
</div>



and the _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>


Simple HTML page (works, height is 100%)
<html>
<head>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
   <script type="text/javascript">
       dojo.require("esri.map");
       var map;
       function init() {
           alert('hello!');
           map = new esri.Map("map", {
               basemap: "streets",
               center: [4.830088, 52.665051], //long, lat
               zoom: 4,
               sliderStyle: "small",
              
           });
       
       }
       dojo.ready(init);
   </script>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">

</head>
<body>
<h3>Hello World!</h3>
<div id="map" class="claro" style="height:100%">
</div>
</body>

</html>


I've made sure to empty my other CSS files in the MVC4 project, to make sure I don't have other styles attached to #map. I'm lost, but it might be a very obvious solution.

Outcomes