CSS font and line-height?

[THE_AI]

Hey guys,
I'm trying to find a solution for the following problem since a lot of time.

If you click on the marker here: http://jsfiddle.net/compojoom/4NUnM/ you will see that the text for the infoWindow is shown outside of the infowindow. For some reason the maps API calculates the height of the bubble wrong, because the body size is in % and then the container of the map has font size set in em...

Once I change them to px values everything is fine.

Is there a way to reset the values to the default used by the map API to calculate the height?

Any ideas?

Thanks in advance,
Daniel

[Joseph Elfelt]

I see that:
1. Your marker uses a default infowindow, and
2. the text extends past the bottom of the default infowindow.

That issue has been discussed in several threads and for awhile I had
the same problem.

Here is the solution I'm using:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f3ebfbad1648ca8d/6ebe7f3e610ee559?lnk=gst&q=elfelt#6ebe7f3e610ee559

[THE_AI]

Hey Joseph,
I'm not sure how to understand your reply. In generally what I see valuable there is the infowindow.close that you do - which I also do for recalculating the height, but the problem that I experience here is a CSS related.

What I would like to do is to reset the css for the map_canvas div. The way the map infowindows will be calculated properly from google. The problem in my case seems to come from the % and then em assignment of font-size. You can correct this by going to px values, but I would like to know how to enforce px values just for the map_canvas div.

Daniel

[Joseph Elfelt]

@Daniel

Sorry I was not more clear.

You are thinking about how Google determines the height of what I am
referring to as a "default" infowindow. In other words, an infowindow
*not* built using google.maps.InfoWindow class.

Now bubble up. It appears that the reason you are thinking about that
is so you can keep your content inside the window.

You would like to find a solution involving px values and the
map_canvas div. If that solution cannot be attained for some reason,
then I have suggested an alternative solution based on
google.maps.InfoWindow class that will keep your content inside the
window and automatically add a scroll bar if necessary.

I wish I could shed light on your preferred solution. If you find out
a way to make that work, please post back here since a number of us
have posted thoughts related to content that blows past the bottom of
a "default" infowindow.

[THE_AI]

Hey Joseph,
Please look at the original example:
http://jsfiddle.net/compojoom/4NUnM/

and then have a look at this one:
http://jsfiddle.net/compojoom/4NUnM/4/

The only difference is the css. In the first one I use % and em, in the second one I use px. In the second one the Infowindow had the proper height. This makes me think that the infowindow makes false calculations when we use % values.

As we know CSS values are inherited from the parent nodes. I'm searching for a way to stop this inheritance and supply px values to the map...

Daniel

[Joseph Elfelt]

Simplify.

Try changing this short form css into the long form:
font: 1.2em/1.5em Arial,Verdana,sans-serif;

Obviously in the long form you can only have one em value.

See: http://www.zytrax.com/tech/css/shortcut.html

If that doesn't fix things you could always try inline styles in your
infowindow content div

[THE_AI]

Ok, I think that I found a solution (workaround):
http://jsfiddle.net/compojoom/4NUnM/21/

So, obviously the map calculates the height of the text wrong.
I thought that I will calculate the height myself and give it to the infowindow. SO, once I have my text node I insert it in the dom (make sure to inject the text in the map container (if you inject it in the body you will also get wrong height px ...) Once you inject the text, get the clientHeight of that text and set it as the height of your element. Then set the element's height and give it to the infowindow.

Now everything should be fine.

Daniel

P.S. When we insert the text in the dom we should set the visibility to hidden - otherwise the user will see  this text on the page...

[MymsMan]

I tried your sample, then copied the text a couple of times and the text overflowed the size of the infowindow (FF 7.0.1) :-(

I'm still looking for the holy grail of a simple technique that copes with arbitrary sized content on all browsers but only uses scroll bars when absolutely necessary.

[Joseph Elfelt]

@MymsMan,

Did you have a chance to try google.maps.InfoWindow class?
Did that not work as you wanted in IE7?

[Bob Buxton]

I do use the InfoWindow class with the content in a DOM div and it works most of the time:
evntObj.infowindow = new google.maps.InfoWindow({
                                               content: document.getElementById('content'+ix)
                                               });

Trying to fix the occasional text overflow is sufficiently far down the ToDo list that I am not too worried about it at the moment.

--
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.

--
Bob Buxton

[THE_AI]

@MymsMan

could you make another jsfiddle where the text is overflowing the bubble size?

[MymsMan]

http://jsfiddle.net/qQJYW/