I am updating some old app and want to increase the height of the map in the browser. Can anyone tell me why the following code if put in a test.html file and opened in a browser will only allow the map height to be about half the window height?
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.11/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.11/"></script>
<script>
var map;
require(["esri/map",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/HomeButton",
"esri/InfoTemplate",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol"],
function (Map, FeatureLayer, Query, HomeButton, InfoTemplate, IdentifyTask, IdentifyParameters, Popup, Color, SimpleFillSymbol, SimpleLineSymbol, arrayUtils, domConstruct, dom, on) {
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("@System.Web.Configuration.WebConfigurationManager.AppSettings['geometry_service']");
var esri_imagery = new esri.layers.ArcGISDynamicMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map = new Map("yowza", {
basemap: "hybrid"
});
map.addLayer(esri_imagery);
});
</script>
</head>
<body>
<div id="yowza"></div>
</body>
</html>
I'm not very familiar with the 3.x version of the API, but it looks like when the map loads into <div id="yowza">, it sets `style="height:400px;"` on the <div>:
If you set a height on the <div> beforehand, it looks like that will take precedence and allow you to control the height of the map. You can add `style="height: 800px"` (or whatever height you want) to the <div>.