height of map related to page

Hi @lostinbits,

Apologies for my delay in replying, I was away. It looks like you got this figured out, looks great!

Do let me know if there is anything else I can help with.

Cheers,

Joe

Hi Joe,

Thanks for the reply. Its good to be away once a while.
I didn’t figure it out yet. I think it look ok, cause we use the same screen resolution.
The height is now set through the plugin setting to 650px. It would be great if it would be possible to set it to another units like percentage or so. Otherwise i could overwrite it with some javascript perhaps.

best,

Lost

Hi @lostinbits,

You should be able to adjust the map height simply using CSS:

.waymark-map {
  height: [XXpx/YY%]
}

Because the Map is contained within the .waymark-shortcode element you may need to adjust this also to get the desired results (height/overflow properties).

If you are looking to do this dynamically and relative to the page then a combination of CSS and JavaScript might be required. You could achieve this in jQuery using something like this (untested):

jQuery(document).ready(function() {
  //Grab elements we need
  var shortcode = jQuery('.waymark-shortcode');
  var map = jQuery('.waymark-map');
  var body = jQuery('body');
  
  //Do calculations...
  var new_height = body.height() / 2;

  //Update height
  map.height(new_height);
});

Please do let me know if you need anything further (including specifics for your page) and I’ll see what I can do.

Cheers,

Joe

Hi Joe,

Indeed, simple css (.waymark-map: height: 100% !important;) worked. I tried it before, but i guess i made a mistake somewhere.

Thanks!

lost

• This reply was modified 3 years, 8 months ago by (lostinbits).