I'm having an issue when adding a Map inside a dojo mobile view. If I add the map directly to the view, the map will not show up, but I get the "attribution". If I add the map to a div inside a view, the div fills the screen, but the map will not fill the div. Is this a bug?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/iPhone.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/Button.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/TabBar.css" />
<style>
html.mobile, .mobile body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
</style>
<!--<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>-->
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" data-dojo-config="isDebug:1, async:1"></script>
<script type="text/javascript">
require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile", "dojox/mobile/ScrollableView","dojox/mobile/View", "dojox/mobile/TabBar", "dojox/mobile/compat","esri/map"],
function (parser,theme,mobile,sv,tb,c,map) {
parser.parse();
var _initialExtent = new esri.geometry.Extent({
"xmin": -14172616,
"ymin": 5661521,
"xmax": -12672005,
"ymax": 6362296,
"spatialReference": {
"wkid": 102100
}
});
var _map = new esri.Map("map", { extent: _initialExtent, logo: false });
var _basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
_map.addLayer(_basemap);
var _map2 = new esri.Map("mapdiv", { extent: _initialExtent, logo: false });
_map2.addLayer(_basemap);
}
);
</script>
</head>
<body>
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Settings</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Show</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">
Setting item here
</li>
</ul>
</div>
<div id="map" data-dojo-type="dojox.mobile.View" style="height:100%;">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 1</h1>
</div>
<div id="map2" data-dojo-type="dojox.mobile.View" style="height:100%;">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 2</h1>
<div id="mapdiv"></div>
</div>
<!-- the bottom tabbar -->
<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props="iconBase: 'images/iconStrip.png', fixed: 'bottom'" style="margin-top:-49px;">
<!-- top left width height -->
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,0,29,30', iconPos2: '29,0,29,30', selected: true, moveTo: 'settings'">Settings</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map'">Map 1</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map2'">Map 2</li>
</ul>
</body>
</html>