26

For some reason InfoWindow is displaying scroll bars along with the content, I tried to have custom width and height to InfoWindow but it is not showing up. I tried the solution from here Google Map Infowindow not showing properly

Please refer following link http://server.ashoresystems.com/~contacth/index.php?option=com_business&view=categoryresult&catid=2

  • Click on 1 (has scroll bars)
  • Click on 3 (even disturbed)

Thanks for any help.

Community
  • 1
  • 1
Dan
  • 453
  • 2
  • 6
  • 8
  • Very similar question here: http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly – Simon East Aug 15 '14 at 01:05

4 Answers4

74

I found a workaround here.

I made this JSfiddle, displaying the bug and a workaround.

If you do not want to visit external links, here is the workaround description:

Add a wrapping div to your info window content:

var infoWindow = new google.maps.InfoWindow({
    content: '<div class="scrollFix">'+infoWindowContent+'</div>',
    [...]
}).open(map);

And use CSS definitions to avoid scrollbars:

.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}
Mohammad Kermani
  • 5,188
  • 7
  • 37
  • 61
Philipp Gächter
  • 941
  • 8
  • 12
  • thanks a lot !! just line-height got it fixed, did you need the other two lines? – Fausto R. Mar 07 '14 at 20:25
  • Thanks it worked like magic! I understand `white-space: no-wrap;`, but how do `line-height` and `overflow` suppress scrollbars? – ruhong Sep 12 '14 at 16:00
  • I can't remember why I needed them. I had various content in these InfoWindows like addresses and links. Maybe they didn't fit without the other two lines. Well, leave them out as long as you don't need them. – Philipp Gächter Sep 25 '14 at 12:43
  • I have tried with infowindow=`"

    $each_facility[facility_name]

    "`. But it not works with this style. SO I replace `

    ` with ``

     – Parixit Nov 27 '14 at 15:22
  • @LuisA.Florit Is the workaround still required? My old JSfiddle does not show the bug anymore. Can you create a fiddle which shows the bug so we can discuss a fix? – Philipp Gächter Jan 21 '20 at 11:41
  • @PhilippGächter I see the bug in an android app that uses javascript, but not in the web version. No idea why. – Luis A. Florit Jan 22 '20 at 16:11
5

To hide the scrollbars, give your content a high z-index stack order, eg.:

var infowindow = new google.maps.InfoWindow({
    content: '<div style="z-index:99999">Message appears here</div>',
});

Or, add the following style:

.gm-style-iw {
    overflow:hidden!important;
    height:55px!important; //for 3 lines of text in the InfoWindow
}
David C
  • 118
  • 1
  • 9
  • You shouldn't need to set the height, jsut target the info window and any child divs e.g. `.gm-style-iw, .gm-style-iw div { overflow:hidden!important; }` – DGibbs Oct 08 '14 at 12:11
  • Only it works for me. Other solutions are rubbish. So I have voted it. Thank you – Abrar Jahin Feb 02 '15 at 05:57
  • the .gm-style-iw selector was very useful. Google maps stripped all attributes, including class='scrollFix' so that didn't work for me. I ended up with this: `.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }` That's just to override `style='overflow:auto'` that's added by google maps. Now I only get scrollbars if the infoWindow can't get any higher. Try `.gm-style-iw div` (without *) to remove all scrollbars. – Marcel van der Drift Mar 31 '16 at 19:52
2

Google maps adds style="overflow: auto;" to the content root element and removes all other attributes, including your style=... or class="scrollFix". You can override overflow: autolike this:

.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }

Marcel van der Drift
  • 373
  • 3
  • 5
0

I have an extension that changes the appearance of my scrollbars. That is why the ugly scrollbars appear on Google API info window boxes.

To get rid of the scrollbars and to have a good amount of padding, I just appended the following to my scrollbar appearance code:

div.gm-style-iw.gm-style-iw-c {
  padding-right: 12px !important;
  padding-bottom: 12px !important;
}

div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {
  overflow: unset !important;
}

You could probably just add that to your site too, to make it a fix for all your users.

Jordi Kloosterboer
  • 3
  • 2