Bug with esri.Map inside

Discussion created by gsimpson4 on Sep 4, 2012
Latest reply on Sep 27, 2013 by ebenekeesri-southafrica-esridist
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" "">

<html xmlns="">
<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" />

    <link rel="stylesheet" type="text/css"  href="" />
    <link rel="stylesheet" type="text/css"  href="" />
    <link rel="stylesheet" type="text/css"  href="" />
    <style>, .mobile body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;

    <!--<script src="//" data-dojo-config="isDebug:1, async:1"></script>-->
    <script src="" 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) {

        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("");

        var _map2 = new esri.Map("mapdiv", { extent: _initialExtent, logo: false });


        <div id="settings" data-dojo-type="">
   <h1 data-dojo-type="" data-dojo-props="fixed: 'top'">Settings</h1>
   <h2 data-dojo-type="">Show</h2>
   <ul data-dojo-type="">
    <li data-dojo-type="">
     Setting item here

        <div id="map" data-dojo-type="" style="height:100%;">
   <h1 data-dojo-type="" data-dojo-props="fixed: 'top'">Map 1</h1>

        <div id="map2" data-dojo-type="" style="height:100%;">
   <h1 data-dojo-type="" data-dojo-props="fixed: 'top'">Map 2</h1>
            <div id="mapdiv"></div>

  <!-- the bottom tabbar -->
  <ul data-dojo-type="" data-dojo-props="iconBase: 'images/iconStrip.png', fixed: 'bottom'" style="margin-top:-49px;">
   <!-- top left width height -->
   <li data-dojo-type="" data-dojo-props="iconPos1: '0,0,29,30', iconPos2: '29,0,29,30', selected: true, moveTo: 'settings'">Settings</li>
   <li data-dojo-type="" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map'">Map 1</li>
            <li data-dojo-type="" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map2'">Map 2</li>