CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-mobile
sanny Sin
sanny Sin

Reputation: 1555

Dynamical map size in jquery mobile

How do i set size in 100% for map on page that using jquery mobile? So far i tried to set height:100%, but that didnt effect, and i still have scroll bars.

If i use height:auto, my map doesnt show

<div id="map_canvas" style="width:100%; height:90%; position:absolute; top:121px;"  ></div>

Upvotes: 0

Views: 177

Answers (3)

Sami
Sami

Reputation: 8419

You are getting scroll due to body margin. Just make it 0. I have tested following in firefox

<html>
<body style="margin:0;">
     <div id="map_canvas" style="height:100%; background-color: black;"></div>
</body>
</html>

Upvotes: 1

Alex Gill
Alex Gill

Reputation: 2491

Why dont you just get the height of device and use that...

var viewportHeight = $(window).height();

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

The usual problem with 100% sizing is that the percentage is of the parent element, so that needs to have a size as well (it can be 100%). See this page on Mike Williams' v2 tutorial (the same concept applies to v3).

You didn't provide any context above the map div.

Upvotes: 0

Related Questions