I added dynamic map service to the mobile template from esri.
However, I see couple issues.
1. map does not cover full screen (when vertical).
2. background shows black on mobile browser (chrome).
Here is a site.
Any advice would be great.
Thank you.
Keisuke
You need to fix the height element of this div:
<div id="mapDiv_root" class="container" style="width: 1600px; height: 400px; direction: ltr;">
It doesn't look like its part of your html file so it'll be a change to the css. You should make it something like 800 or 900 px in height.
In the css, it uses relative.
Width is set for 100%.
html, body, .mblView {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
#mapView {
/*height: 100%;*/
}
#map {
position:relative;
width: 100%;
height: 100%;
}
Using position relative is fine but you didn't position its container (mapContainer) so your position:relative doesn't mean anything.
You need to add rules to parent elements if you want to use position:relative.
Also, in the console:
TypeError: dom.byId(...) is null
dom.byId("map").style.height = availHeight + "px";
There is no dom element with the id of map. You use "mapDiv". There's a map class though.
On second look, the following snippet doesn't do anything at all because you are assigning this to a dom node with an ID of map, not a class of map.
#map {
position:relative;
width: 100%;
height: 100%;
}