Mobile Template

[KeisukeNozaki]

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]

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.

[KeisukeNozaki]

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]

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

}