Make a map span 100% height?

Hi there,

I’ve finally managed to set up a full page buddypress map using the plugin. You can see it in action here:

http://drummersdatabase.com/map/

All that’s left to do is sort out the vertical display. It seems that 100% is an acceptable value for width but not height:

When I use this code:

[agm_all_profiles_map zoom=”3″ height=”700px” width=”100%”]

The map spans the width of the user’s resolution, but when I set the height to 100% it is interpreted as 100px instead of the full height available. I’d rather not have to set a specific value such as 700px as on smaller screens the user would have an unnecessary scrollbar.

Please tell me there’s a simple way around this? :slight_smile:

Thanks,

Dave

  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    Very cool. Are you using our google maps plugin for this?

    Try adding something like this (customize it to match your main map DIV):

    .YOURCLASS {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    }

    If you need a little spacing you can try adding margin values in there as well. Hope that helps!

  • davejmason
    • Site Builder, Child of Zeus

    Yep, it’s the WPMUdev plugin. I’ve been bugging you guys relentlessly with different support requests so it’s really starting to shape up nicely now. You have the collective patience of a saint!

    Do you mean to say that the 100% height applied in the map shortcode will only work if the div is also told to stretch to 100% of the screen? I guess this makes sense as the contents of a div can only stretch to the edge of it right?

    [EDIT] Hmm nope this doesn’t seem to be the case. Even if I set the height of the div to something like 500px and the height of the map to 100% it still stays at 100px deep…

    Applying 100% to the div height also doesn’t work. Maybe you can’t use % in css height?

  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    You can only use a 100% height in CSS when the parent DIV has a defined height. The code I provided will work with making something apply to the entire contents of its container DIV, but it may not work with the mapping plugin (it was worth a shot though).

    I’ll ask the developer if he has any suggestions. I found an older question on stackoverflow with some suggestions, but I don’t think any of them are really meant for google maps:

    http://stackoverflow.com/questions/6158975/css-100-height-layout

    Thanks!

  • davejmason
    • Site Builder, Child of Zeus

    Hi PC, I had to put this on a backseat while I sorted a few major site bugs but I’ll get around to it this week. For now I’ll mark the topic as resolved. If I have any trouble with it I’ll just reopen it :slight_smile:

    Once again, you guys are awesome, thanks for the help. I’ll keep you updated.

  • PC
    • WPMU DEV Initiate

    Cool ! Please feel free to reopen it or just creating a new one as and when required !

    Thanks a lot for the nice words :slight_smile: Its the continued love we get from our great members which keeps us nice and awesome !

    Have a blessed day

    Cheers

    PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.