Infowindow - Unwanted scroll bars in Firefox, Chrome & Safari.

[Peter Lawless]

Hi

My V3 rework of our map software has unwanted scroll bars appearing in Firefox, Chrome & Safari (OK in IE7 and Opera).

We have tracked the cause to an 'overflow:auto' being set by the Google api in the div it creates which immediately contains our content.

<div style="cursor: default; position: absolute; left: 16px; top: 16px; z-index: 2; overflow: auto; width: 350px; height: 97px;">

<div style="overflow: auto;"> <-- this is created by Google api

<div class="bubble selfclear"><h1 id="bubHD">Test</h1></div> <-- this line is my content

</div>

</div>

I have posted a simple example at http://www.lawless.info/gmaps/bubble test.html which uses a 'selfclear' to induce the scroll bars.  In my development environment the scroll bars appear almost at random and I have been unable to see a pattern of content that turns them on. 

In api V2 software the containing div did not have a style of overflow:auto applied.  I have tried adding the overflow:auto style to an api V2 infowindow using Firebug and the scroll bars immediately appear.

I have a work around for my development by targeting the offending div and applying overflow:hidden.

div.gmnoprint div div div {

overflow: hidden !important;

}

It works but I would not regard it as an acceptable solution.

Can some one advise is this a bug in the api or is there a good reason to the change from version 2?

Thanks 

Peter

[Joseph Elfelt]

Please check your link

[Peter Lawless]

Sorry left a space in the url!  Try this one.

http://www.lawless.info/gmaps/bubble_test.html

On Wed, Aug 25, 2010 at 7:20 PM, Joseph Elfelt <joseph...@gmail.com> wrote:

Please check your link

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Brad C]

Hey there Peter

I've noticed this problem on my v3 maps as well and it's a real
nuisance. Now that you've brought it up I decided to see if there was
a way to squash this one and I think I may have an alternative
solution. I haven't tried this yet on my map but after poking around
on yours it seems as though <h1> could be the culprit. I would
suggest creating a differently named css id that mimics the h1 rule.
See if that gets rid of those nasty scroll bars. :)


Good luck!

On Aug 25, 3:06 pm, Peter Lawless <pjl.g...@gmail.com> wrote:
> Sorry left a space in the url!  Try this one.
>
> http://www.lawless.info/gmaps/bubble_test.html
>

> On Wed, Aug 25, 2010 at 7:20 PM, Joseph Elfelt <josephelf...@gmail.com>wrote:
>
> > Please check your link
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .

[Brad C]

Better yet... Use <h2> instead. It's nearly as effective and seems
to resolve the random scroll bar issue on my maps. I'll probably
switch to <h2> on my maps. <h1> is just a bit over the type in terms
of title size.

[Peter Lawless]

Hi Brad

I have tried using h2 in fact we tried them all though to h7 yesterday.  All with no luck.

The problem is the overflow:auto on the containing div.  The reference says you should be able to put a size on your content div so it really should work straight out of the box.

I tried not putting a width on my content and using maxWidth in the infowindow options.  That got rid of the horizontal scroll bar but not the vertical one, it also made by infowindows look a mess.

Maybe it should be reported as a bug?

Peter

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.

To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.

[Franky Van Liedekerke]

On Thu, Aug 26, 2010 at 5:22 PM, Peter Lawless <pjl....@gmail.com> wrote:

Hi Brad

I have tried using h2 in fact we tried them all though to h7 yesterday.  All with no luck.

The problem is the overflow:auto on the containing div.  The reference says you should be able to put a size on your content div so it really should work straight out of the box.

I tried not putting a width on my content and using maxWidth in the infowindow options.  That got rid of the horizontal scroll bar but not the vertical one, it also made by infowindows look a mess.

Maybe it should be reported as a bug?

The way I got around it is by specifying a height for the text div inside the infowindow (I place my content in a extra div). Although of course it does not autoresize ...
Probably calculating the div height and then setting it would be the best solution.

Franky

[Brad C]

I did something similar to yours Franky. On mine I removed the
default margin which took care of the scroll bars using <h2
style="margin: 0px;">. I also noticed that adding a 1px right padding
helped in some cases; <h2 style="margin: 0px; padding-right:1px;">.
Oh and I don't use my own divs.

http://www.darkmatters.org/Map/Test2/MakeMarkers2.html

[Peter Lawless]

Hi Brad & Franky et al

Over a glass this evening I thought it would be a better approach to use a bit of JS and work out from my own content div to fix the overflow:auto issue rather than in via about 6 divs with CSS.

I gave my content div an id of 'xxxx' thinking it might attract the attention of the Australian development team! 

Then document.getElementById('xxxx').parentNode.style.overflow=''; added immediately after the infowindow.open removes the overflow style from the parent div.  

Problem, at least for now, solved. Modified code now at http://www.lawless.info/gmaps/bubble_test.html  

Can anyone think why we should not take this approach?

Regards

Pete

[Brad C]

Nice work Pete, I can't think of a reason off hand not to use it
myself. I may even try it out since I discovered that I still need to
spruce up my infowindows. Generally mine are ok... Until I click a
link inside it. When I do 2 vertical scroll bars appear out of
nowhere. Ugh!

[William]

On Aug 27, 7:46 am, Peter Lawless <pjl.g...@gmail.com> wrote:
> I gave my content div an id of 'xxxx' thinking it might attract the
> attention of the Australian development team!
> Then document.getElementById('xxxx').parentNode.style.overflow=''; added
> immediately after the infowindow.open removes the overflow style from the
> parent div.
>

I'm not sure how that is different from putting the rule in CSS?

http://www.william-map.com/20100828/1/iw_id.htm

...

[Franky Van Liedekerke]

On Thu, 26 Aug 2010 22:46:02 +0100
Peter Lawless <pjl....@gmail.com> wrote:

> Hi Brad & Franky et al
>
> Over a glass this evening I thought it would be a better approach to
> use a bit of JS and work out from my own content div to fix the
> overflow:auto issue rather than in via about 6 divs with CSS.
>
> I gave my content div an id of 'xxxx' thinking it might attract the
> attention of the Australian development team!
> Then document.getElementById('xxxx').parentNode.style.overflow='';
> added immediately after the infowindow.open removes the overflow
> style from the parent div.
>
> Problem, at least for now, solved. Modified code now at
> http://www.lawless.info/gmaps/bubble_test.html
>
> Can anyone think why we should not take this approach?
>
> Regards
>
> Pete

Hi Pete,

I tried it here and still got scrollbars ... maybe I made an error
coding it up, but you should also try with more than 2 lines in your
infowindow. I'll test again later.

Franky

[Franky Van Liedekerke]

try putting more than 2 lines in your infowindow and see what
happens ...

Franky

[Peter Lawless]

Franky - my development infowindow contains a  <div> which includes an <img> and <p> tags and up to 3 <a> tags in a <ul> positioned horizontally, hence the need to use clearing.  Seems to work fine - after all the div I am tweaking does not have an overflow style in V2 api and my infowindow has always worked in that version.

William - the result is the same as just using CSS but I think (hope!) it is going to be more reliable to go up one from a known position than down about 6 with CSS.

--

[JoshN]

Greetings,

I was having the same problem with about 12 lines of text. After
adding this to my marker click listener:

//infowindow is an instance of google.maps.InfoWindow
infowindow.close();

document.getElementById('infoWindow').parentNode.style.overflow = '';

document.getElementById('infoWindow').parentNode.style.overflowX =
'hidden';

all the scroll bars went away. I'm still not sure why I needed to
close then reopen the infowindow when moving from one marker to the
other, but it failed without doing this.

Hope this helps someone

[Franky Van Liedekerke]

On Thu, 26 Aug 2010 22:46:02 +0100
Peter Lawless <pjl....@gmail.com> wrote:

> Hi Brad & Franky et al
>
> Over a glass this evening I thought it would be a better approach to
> use a bit of JS and work out from my own content div to fix the
> overflow:auto issue rather than in via about 6 divs with CSS.
>
> I gave my content div an id of 'xxxx' thinking it might attract the
> attention of the Australian development team!
> Then document.getElementById('xxxx').parentNode.style.overflow='';
> added immediately after the infowindow.open removes the overflow
> style from the parent div.
>
> Problem, at least for now, solved. Modified code now at
> http://www.lawless.info/gmaps/bubble_test.html
>
> Can anyone think why we should not take this approach?
>
> Regards
>
> Pete

Well, this might work if your page is created statically, but I'm using
a dynamically created page and need to call the google map API
asynchronously. When I then do this:

var s_map = new google.maps.Map(div_id, myOptions);
var s_infowindow = new google.maps.InfoWindow({ content: "<div
id=\"locationballoon\"
class=\"location-balloon\">TEST</div>" });
....
s_infowindow.open(s_map,s_marker);
document.getElementById("locationballoon").parentNode.style.overflow='';

I then get a javascript error:
Error: document.getElementById("dbemlocationballoon") is null

While in the generated page, the id is indeed there, it seems the
javascript is called earlier and thus can't see that specific new id.

So I will now try the CSS method.

Franky

[Peter Lawless]

Hi Franky

Good spot when you are opening the infowindow as you are so you come into the map with the infowindow open it shows up my badly designed code!

What I should have done is wait for the 'domready' event to fire, before trying to access the div.

google.maps.event.addListener(infowindow, 'domready', function() {

document.getElementById('xxxx').parentNode.style.overflow='';

document.getElementById('xxxx').parentNode.parentNode.style.overflow='';

   });

I tried the above code which has removed that problem.  Strangely when I made the change I needed to remove the overflow auto from the next div up as well.  No idea why.

Posted the code at http://www.lawless.info/gmaps/bubble_test.html

Pete

--

[JoshN]

I forgot to mention that my content div's id is also infowindow, as
you probably figured out..

[Franky Van Liedekerke]

Peter,

you tha man! This is a really great working solution. Took me some time implementing it (big javascript, lots of maps and loops) but now it rocks. Thanks a lot for the "final" solution.

Franky

[Peter Lawless]

Hi Josh

Have you seen the rest of the thread? Franky found a bug in my original code, which probably explains why you were having to close and open the infowindow to get the fix to work.  

See the rest of the thread for the fix. Trouble is I still think in UCSD Pascal where things happed in sequence!

Pete 

On Tue, Sep 7, 2010 at 12:38 AM, JoshN <joshua....@gmail.com> wrote:

I forgot to mention that my content div's id is also infowindow, as
you probably figured out..

[Martin Tod]

Many thanks.

Ended up doing the same thing in jQuery - and hugely grateful to you
for sorting this out...

Gave every box the same class ('xxxx') and used their class selected
to solve the problem.

infoWindow.open(map, marker);
jQuery('.xxxx').parent().parent().css('overflow-y','visible')
jQuery('.xxxx').parent().css('overflow-y','visible')



Martin

On Sep 6, 6:35 pm, Peter Lawless <pjl.g...@gmail.com> wrote:
> Hi Franky
>
> Good spot when you are opening the infowindow as you are so you come into
> the map with the infowindow open it shows up my badly designed code!
>
> What I should have done is wait for the 'domready' event to fire, before
> trying to access the div.
>
> google.maps.event.addListener(infowindow, 'domready', function() {
> document.getElementById('xxxx').parentNode.style.overflow='';
> document.getElementById('xxxx').parentNode.parentNode.style.overflow='';
>    });
>
> I tried the above code which has removed that problem.  Strangely when I
> made the change I needed to remove the overflow auto from the next div up as
> well.  No idea why.
>

> Posted the code athttp://www.lawless.info/gmaps/bubble_test.html

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

[JoshN]

Pete,

Thanks for grabbing my attention, I had indeed stopped watching this
thread, but would rather not close then reopen the infowindow.

Something odd came up while applying the change.

I am using prototype 1.6.1--though I usually translate back to normal
js when posting short bits. When using the fix listed above,
translated to prototype as:

google.maps.event.addListener(infowindow, 'domready', function()
{
$('infoWindow').getOffsetParent().setStyle({
overflow: ''
});
$('infoWindow').getOffsetParent().setStyle({
overflow: ''
});
});

The horizontal scrollbar remains.

When I substitute parentNode for getOffsetParent() the problem
subsides:

google.maps.event.addListener(infowindow, 'domready', function()
{
$('infoWindow').parentNode.setStyle({
overflow: ''
});
$('infoWindow').parentNode.setStyle({
overflow: ''
});
});

I'll try to create a simple example and see if it is a conflict with
my own script, which is rather absurdly large.

On Sep 8, 10:21 am, Peter Lawless <pjl.g...@gmail.com> wrote:
> Hi Josh
>
> Have you seen the rest of the thread? Franky found a bug in my original
> code, which probably explains why you were having to close and open the
> infowindow to get the fix to work.
>
> See the rest of the thread for the fix. Trouble is I still think in UCSD
> Pascal where things happed in sequence!
>
> Pete
>
>
>
> On Tue, Sep 7, 2010 at 12:38 AM, JoshN <joshua.l.new...@gmail.com> wrote:
> > I forgot to mention that my content div's id is also infowindow, as
> > you probably figured out..
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

[JoshN]

I seem to have pasted incorrectly, The working listener for Prototype
was actually:

google.maps.event.addListener(infowindow, 'domready', function(){
$('infoWindow').parentNode.setStyle({
overflow: ''
});

$('infoWindow').parentNode.parentNode.setStyle({
overflow: ''
});
});

The listener I thought would work was:

google.maps.event.addListener(infowindow, 'domready', function(){
$('infoWindow').getOffsetParent().setStyle({
overflow: ''
});
$

('infoWindow').getOffsetParent().getOffsetParent().setStyle({
overflow: ''
});
});

Just in case someone happens to be googling for this...

[JoshN]

After marking this down as a solved problem, I was perusing my map and
realized that this fix does not work if the content div of the
infoWindow is larger than ~70% of the map_canvas. When this is the
case I actually did need the Y-scroll bars. Here was my final fix in
prototype (1.6.1):
//My infoWindow's id = infoWindow and my map object is is named
map
//Fix the scrollbar issue

google.maps.event.addListener(infowindow, 'domready', function() {
$('infoWindow').parentNode.setStyle({

overflow: '',
width: $('infoWindow').parentNode.getWidth() //absolutize
the parent's width

});
$('infoWindow').parentNode.parentNode.setStyle({
overflow:

'', //remove the
auto setting; had an issue with this
overflowX: 'hidden',
overflowY: 'auto',
});
$('infoWindow').setStyle({
width: ($('infoWindow').parentNode.parentNode.getWidth() -
20) //leave 20px for the scrollbar
});
});

Hopefully this helps someone.

[Stephen Graham]

Thanks for all the great discussion on this topic.

My variation on the problem was in Firefox (3 and 4-beta) the infoWindow appeared correctly until the link was clicked.

On the click, Firefox would create the scroll bars and not follow the link.

Cause? Firefox would put that little dotted outline around the link which would move the link from under the mouse and add scroll bars.

Tried all your <div> adjustments but to no avail...

The solution for me was to add "outline:none" to the css for the link.

.infowindowlink {

font-size:12px;

text-decoration: underline;

position:absolute;

bottom: 0;

right: 0;

outline: none;

}

No bump. No scroll bars. Just happiness!

Stephen

[David M]

Glad I stumbled up the solutions of this page, especially the simple genius of setting the parent/parent-parent to overflow:none.  Brilliant.

In my attempts to figure out what was happening, I stumbled up the following in my context (only?): adjusting the font-size of the last line affected the presence of scroll bars (vertical).

For what it's worth, my hacked solution is to add a single line to the end of the content of the InfoWindow with a font-size of 20%.  For example (see the end of the second line):

   var infowindow = new google.maps.InfoWindow();

   infowindow.setContent("Lots of stuff here, including inline spans if desired.<br/><span style=\"font-size:20%\">&nbsp;</span>");

For some reason, this made the scroll bars not show up.  This option (hack?!) allowed me to put dynamically created content into the InfoWindow wherein I simply add the "<br/><span...." to the end.

Also, for what it's worth, I had to remove the <h4> tag from the first line which was a relatively long sentence.  Having the <h4> tag made the scroll bars come back.

Not even a full "two cents",

David

[xelawho]

somebody came up with a much simpler solution which worked for me.
maybe it will work for you, too:

content='whatever you want'
var div = document.createElement('div');
div.innerHTML = content;
infowindow.setContent(div);

[Jason]

jquery method -



add this line to your click function for the infoWindow:

    //remove overflow scrollbars
    $('#myDiv').parent().css('overflow','');