StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POContent using all available space with jQuery Mobile
primarykey
Id
9485568
data
AcceptedAnswerId
9486455
AnswerCount
3
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-02-28T16:14:23.407
FavoriteCount
14
LastActivityDate
2014-03-26T02:47:55.347
LastEditDate
2012-02-28T17:09:00.393
LastEditorUserId
752738
OwnerUserId
571353
ParentId
0
PostTypeId
1
Score
18
ViewCount
24091
LastEditorDisplayName
text
Body
<p>I have a project with jQuery Mobile + phonegap and I have some issues with the footer and content div.</p> <p>A basic jQuery Mobile page looks like this:</p> <pre><code><div data-role="page" data-theme="b" id="map"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#" data-rel="back" data-icon="arrow-l">Back</a> <h1>MAP</h1> </div> <div data-role="content" id="map_canvas"> </div> <div data-role="footer" data-theme="d"> <h4>TEST</h4> </div> </div> </code></pre> <p>Now I'm trying to load google maps in the content so I use this in JavaScript:</p> <pre><code>$('div').live("pageshow", function() { var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </code></pre> <p>And this is the result:</p> <p><img src="https://i.stack.imgur.com/AnQlu.png" alt="Page with footer after content"></p> <p>The problem is that the footer doesn't stick to the bottom unless you specify the attribute <code>data-position="fixed"</code> like this:</p> <pre><code><div data-role="footer" data-theme="d" data-position="fixed"> <h4>TEST</h4> </div> </code></pre> <p>That's fine but the problem is the map is loading before jquery mobile take the footer to the bottom, as a result I have this page:</p> <p><img src="https://i.stack.imgur.com/q6hUp.png" alt="Page with footer fixed"></p> <p>Where you can see the map only using the space left before it's moved to the bottom.</p> <p>My question is.. what event should I wait for or what do I need to add to my code in order to load the map so it will use all the space between header and footer?</p>
Tags
<css><jquery-mobile><google-maps-api-3>
Title
Content using all available space with jQuery Mobile
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJasper
UserOwnerUserId
1. USSERPRO
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POContent using all available space with jQuery Mobile
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POContent using all available space with jQuery Mobile
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POContent using all available space with jQuery Mobile
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.