All geek questions in one place

Google map does not display correctly after adding jQuery Mobile dashboard

The map was displayed correctly before adding the panel . Now, as soon as I add a panel div on the page, the map will display like this:

enter image description here

It just clutters the top, leaving a wide space below. The button in the upper left corner of the image is used to open a panel that opens normally. Sorry for working with a spotty image.

The following is the HTML:

 <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>

My custom css

 html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-page, #map-canvas { height: 100% }

Otherwise, I use jquery.mobile-1.3.1.min.css by default. I probably know that this is possible due to css, but could not understand.

+4
source share
1 answer

You will need to change your own CSS . In this working example, I used your HTML page and changed its CSS. The main problem here is not the panel, at least not directly. The height of the panel will cause the contents of the div to be missing, and this can be fixed using CSS .

This is a working example: http://jsfiddle.net/7kGdE/105/

CSS:

 #map-canvas { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; }

This solution is also described HERE .

+5
source

Source: https://habr.com/ru/post/1493065/

More articles:


All Articles