topic Mobile Template in ArcGIS JavaScript Maps SDK Questions

Mobile Template

KeisukeNozaki — Wed, 17 Sep 2014 14:51:17 GMT

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

deleted-user-Yo2nEyVX5Kjk — Mon, 29 Sep 2014 17:44:40 GMT

You need to fix the height element of this div:

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.

KeisukeNozaki — Tue, 30 Sep 2014 19:58:12 GMT

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%;

}

JonathanUihlein — Wed, 01 Oct 2014 16:46:33 GMT

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%;

}