Mobile example: issues with featurelayer, map load events

[TracySchloss]

I'm expanding on a basic mobile example, trying to add a featurelayer of my own data and  list of fish advisories (how many of what kinds of fish it's safe to eat from a river). It opens with a choice of viewing a list or a map.  From the list, the user should be able to click the map button to zoom into that river.

When viewing the map first, it is extremely cropped on the sides,and doesn't initially load my featurelayer, which generates errors (unable to draw graphic). There is a map load event that is supposed to manage the screen resolution and set the display.  I've tried commenting the line that fires that map on load event, but it is still cropped. 

If I start with the list, the first time I click the map button, it doesn't draw, giving errors on the featurelayer.  But subsequent selections do show the featurelayer and its zoomed to the correct river.  Obviously events are not firing/responding in the order I expect to see them.  I have no clue why my map is only showing for a few seconds before it disappears.

I still haven't figured out how to post my code anywhere for people to view and edit it for me.  That's a whole other thread to post!

Update:  Here's my first attempt at using JSFiddle.  At least this made me try again to use it!

http://jsfiddle.net/schlot/7t8Lu/1/

[TracySchloss]

Update - I removed all the references to map.resize and map.reposition and commented out the function that was supposed to adjust the the map height.  I am no longer seeing the map disappear after a few seconds, but the size of the map is still set to 400 X 400.  The map container it's in fills the screen, its only mapDiv that's cropped.  I've kept my jsFiddle updated with my local changes if anyone is willing to take a look.   This is going to be a nice basic mobile example for somebody if I can just get this last bit figured out!
http://jsfiddle.net/schlot/7t8Lu/1/
map definition:

 map = new Map("mapDiv", {    
    basemap: "streets",
    center: [-92.593, 38.5],
    zoom: 6,
    infoWindow: popup,
   });


// divs

<div id="mapView" data-dojo-type="dojox/mobile/View" >
<div id="mapHeader" data-dojo-type="dojox/mobile/Heading">
<ul data-dojo-type="dojox/mobile/TabBar" data-dojo-props='barType:"segmentedControl"'>
  <li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='selected:true, moveTo:"mainView"'>Main</li>
  <li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"listView"'>Advisory List</li>
</ul>
</div> 
      <div id="mapContainer" data-dojo-type="dojox/mobile/ContentPane">
          <div id="HomeButton"></div>
        <div id="mapDiv">
         
        </div>
      </div>
    </div>

[TracySchloss]

I think I found a clue of what is happening.  My opening view isn't the map, it's a couple of choices for either viewing the map or a list.  Apparently when you do this, the default map ends up created as 400 x 400 because the div it's in isn't initialized yet.  I added some code in my map.on ('load') to set the height of my mapDiv to be 100% and it is now filling the screen.  I'm not sure I have it set to the right listener, but at least it isn't cropped!