0

I can see that the width of the div container is OK (I put a border around it that is visible)

It shows correctly on the screen, but when trying to print you can see that some text items from the map slide to the right and create a ga a a a a a ap...

You can see it live on http://PicGPS.com

Any idea how to fix it? some magic CSS maybe?

enter image description here

Yovav
  • 2,557
  • 2
  • 32
  • 53

2 Answers2

2

https://stackoverflow.com/a/10210153/3585278

You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}
Community
  • 1
  • 1
Danieboy
  • 4,393
  • 6
  • 32
  • 57
  • Thanks but I just tried it and it's not working, all container divs are 100% (otherwise I think the border would not show all the way to the right) I think the problem is maybe some CSS from the map - but I can't figure out what exactly... – Yovav Jul 22 '16 at 06:26
1

For Print try setting the margin and the dimension for the media print 

@page  
{ 
  size: auto;   /* auto is the initial value */ 
  div#map {
    width: 100%; height: 100%;
    margin:0mm;  
    pabbing: 0mm;
  }


}
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
  • I just tried it, not working, plus you can see that the border goes all the way to the right... – Yovav Jul 22 '16 at 06:23
  • Try using the map id in css .. i have slightly update then answer – ScaisEdge Jul 22 '16 at 06:25
  • Like in the answer ..div#your_map_div_id .. and for debug try changing .. dimension of the map div and or orientation of the page .. could be the problem is related to the ratio between height and width – ScaisEdge Jul 22 '16 at 06:29
  • Thanks but this is not working... I think the google map generates some style that is causing that... – Yovav Jul 26 '16 at 11:30