Home › Forums › MapPress Support › Mappress_Map responsive width
Tagged: responsive php
- This topic has 4 replies, 3 voices, and was last updated 8 years, 9 months ago by
isao@yoshikoshi.name.
-
AuthorPosts
-
January 15, 2014 at 5:14 am #14087
Hi,
I’m using php to create the map dynamically. Want to be able to set the width and height to a % for when on different screen sizes but when the height and width won’t take any other input other than a number, which it then converts to pixels.Is there another way to do this?
The code:
$mapwidth = 1000;
$mapheight = 350;
$mymap = new Mappress_Map(array(“width” => $mapwidth, “height” => $mapheight, “center” => array(“lat” => $mapcenterlat, “lng” => $mapcenterlng), “zoom” => $mapzoom ));Thanks,
KeithJanuary 15, 2014 at 6:50 am #14089Hi,
This should work:
$mapwidth = "100%"; $mapheight = "100%";
Note that if you set a height in %, you must have a containing element around the map that has an explicit height. Otherwise the browser will treat 100% of nothing, or zero.
April 29, 2014 at 2:26 pm #14609Hello,
Using this code, I’ve got zero height map.
Any suggestions?<div style="width:480px; height:480px;">[mappress id="1" width="100%" height="100%"]</div>
Page source code from browser:
<div style="width:480px; height:480px;"> <div id="mapp1_layout" class="mapp-layout mapp-align-default" style="width: 100%; "> <div id="mapp1_links" class="mapp-map-links"></div> <div id="mapp1_dialog" class="mapp-dialog"></div> <div id="mapp1" class="mapp-canvas" style="width: 100%; height: 100%; "></div> <div id="mapp1_directions" class="mapp-directions" style="width:100%"></div><div id="mapp1_poi_list" class="mapp-poi-list" style="width:100%"></div></div></div>
Thanks,
IsaoApril 29, 2014 at 5:05 pm #14610Hi,
I think I see the problem – the plugin sets width on the outermost div but the height is set on the inner canvas div. This works if the height is in pixels but not if it’s in %.
To make % height work you’ll need to either modify the template file ‘map_layout.php’ or use CSS. For CSS, if you give your container div the id ‘xyz’ something like this might work:
#xyz .mapp-layout { height: 100% }
Or maybe you could just include the height and width in the shortcode directly:
[mappress id="1" width="100%" width="480" height="480"]
April 30, 2014 at 11:55 am #14621Hi,
I think I’ve solved my problem.
I want to make map responsible not only width but also height (eg. on iPhone, fit width to screen and set height to 300px).
I’ve set height of mapp-canvas class in custom CSS (including media query), it works.Thanks for your quick help!
Isao
-
AuthorPosts
- You must be logged in to reply to this topic.