AnsweredAssumed Answered

mobile_dev.html Tutorial - why doesn't it work to switch the positions of the views?

Question asked by schlot on Mar 27, 2014
Latest reply on Mar 28, 2014 by schlot
I think this is a very common scenario and I've read several threads about this.  Instead of opening with a map, you want to show something else instead first, maybe a query, and then show the results on a map next and/or optionally.  There seems to be all sorts of issues dealing with a map 'after the fact', Once your map isn't part of your initial display, there's all sorts of extra steps you have to take to deal with this. 

For example:  In the mobile_dev.html tutorial, there are two views, one Map and one for About.  It initializes with a map first.  But what if I want to have the About on top?  All I did was switch the positions, and change the about to have the 'selected:true' defined.  I'm not sure I even needed to physically change the order in the code:
  <body>     <div id="aboutView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">       <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">About</h1>       <p style="padding: 5px;">This area can contain additional information about your application.</p>       <p>Ex quorum ab quorum non senserit magna se litteris firmissimum. Pariatur fore        elit do dolor, eram vidisse id proident, nam anim ea multos, ab multos offendit.        Labore coniunctione senserit legam commodo. Aut in voluptatibus, ab singulis        consectetur iis e culpa enim ad quamquam ubi ita amet quibusdam. Quis iudicem e        nostrud, in veniam varias nisi admodum, eiusmod esse quamquam arbitror sed dolor        eruditionem commodo eram consequat. Esse cupidatat te culpa nisi. Vidisse lorem        minim ab nulla.       </p>     </div>         <div id="mapView" data-dojo-type="dojox.mobile.View" >       <div id="header" data-dojo-type="dojox.mobile.Heading">         <div id="aboutButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: right;" moveTo="aboutView">About</div>       </div>       <div id="mapContainer" data-dojo-type="dojox.mobile.ContentPane">         <div id="map"></div>       </div>     </div>   </body>


When you do this, when you switch to the map, first it is cropped to a narrow column and then it disappears completely.  I don't understand why.  In this particular example there seems to be all sorts of extra functions for map resizing etc and you'd think somewhere in there the map would be properly displayed.  I see this same behavior in both Firefox and Chrome.

Outcomes