Ever since I added the panel div, the map on my page has been displaying incorrectly. Now, it appears cluttered at the top with a wide space below. The button in the top left corner is meant to open the panel, which it does successfully. Apologies for the messy image.
Below is the HTML code:
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="panel" id="mypanel">
<!-- This is the problematic panel-->
</div><!-- /panel -->
<div data-role="header">
<a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext">Choose Station</a>
<h1>The Header</h1>
<a href="index.html" data-ajax="false" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a>
</div><!-- /header -->
<div data-role="content" id="map-canvas"> <!--Div for map display.-->
</div><!-- /content -->
<div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
<h4>© 2013</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Here is my custom CSS:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-page, #map-canvas { height: 100% }
I am using the default jquery.mobile-1.3.1.min.css. It seems like there might be a CSS issue causing this problem, but I haven't been able to pinpoint it yet.