Google Map InfoWindow displays scroll bars in Google Chrome

Question

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.

Answer 1

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; } 

Answer 2

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 }