tip for mobile: use screen.height

8,912 views
Skip to first unread message

Libby

unread,
Mar 24, 2011, 1:57:49 AM3/24/11
to jquery-ui-map-discuss
Working on mobile, I want to use all the screen for maps.

Instead of using in html: style="height:520px;" I found that I can
programmatically set full height with:

$('#map_canvas').css({height:screen.height});
$('#map_canvas').gmap( . . .

So my height will always be full screen (screen.height). Still
wondering
why height: 100% is rejected in so many places.

Cheers,
Libby

Johan Säll Larsson

unread,
Mar 24, 2011, 3:16:37 AM3/24/11
to jquery-ui-...@googlegroups.com
Hi,

You can do like this:

<div data-role="page" class="page-map">
    <div data-role="content"> 
        <div id="map-canvas"><!-- MAP LOADS HERE --></div>
    </div>
</div>

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }
#map-canvas { height: min-height: 100%; }

If I remember correctly it's because the <div> with height 100% will look to it's parents height, so in a normal web page you would set something like this

html, body { height: 100%; }
#someDiv { min-height: 100%; }

Libby

unread,
Mar 24, 2011, 8:21:27 PM3/24/11
to jquery-ui-map-discuss
Thanks! That's just what I needed. I was expecting the normal
web html/css to work with jquery - hah!

I think a lot of jquery + map users are missing this info. Maybe
you should add it to more discussions on the jquery forum and
shamelessly plug your jquery ui maps at the same time :-)

On Mar 24, 12:16 am, Johan Säll Larsson <johansalllars...@gmail.com>
wrote:
> Hi,
>
> You can do like this:
>
> <div data-role="page" class="page-map">
>     <div data-role="content">
>         <div id="map-canvas"><!-- MAP LOADS HERE --></div>
>     </div>
> </div>
>
> .page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0;}
>
> #map-canvas { height: min-height: 100%; }
>
> If I remember correctly it's because the <div> with height 100% will look to
> it's parents height, so in a normal web page you would set something like
> this
>
> html, body { height: 100%; }
> #someDiv { min-height: 100%; }
>

PhxCigars

unread,
May 13, 2011, 6:20:41 PM5/13/11
to jquery-ui-map-discuss
Hey
Also Rob and I are both seeming to have the same issue with auto
sizing for different devices. Auto scales horizontally but not
vertically.
Which is fine for iphone and android phones, but not for tablets such
as galaxy or iPad.
The get location code does not seem to reference enableHighAccuracy:
true anywhere,
I only ask this because my Evo 4g seems to never fire off gps to get
the most accurate location.
With gps on or off on my phone i get the same results on the map,
they
can be close but never accurate.
Once again i thank you and everyone here on this forum for their help
and support!
Sean

newhere inc

unread,
May 16, 2012, 8:19:19 AM5/16/12
to jquery-ui-...@googlegroups.com
I've tried this and it doesn't work,

i'm using jquery mobile, split view, jquery ui maps, the map is not showing when I put this in....

just to clarify i put

<style>
.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0;} 

 #map-canvas { height: min-height: 100%; }  
</style>

<body>
<div data-role="page" id="mapPage" class="page-map">
    <div data-role="content"> 
        <div id="map-canvas"><!-- MAP LOADS HERE --></div>
    </div>
</div>


</body>


Elizabeth Baldwin

unread,
May 16, 2012, 9:16:18 AM5/16/12
to jquery-ui-...@googlegroups.com
 #map-canvas { height: min-height: 100%; }

I think there is a bug in the css:
height: min-height: 100%;

Should be
height: 100%; min-height: 100%;

I use in some places:
min-height: 100%;

However I'm not sure if this is your problem. Any
errors?

Cheers,
Libby
Reply all
Reply to author
Forward
Message has been deleted
0 new messages