Bug with balloons with "fill window" positioning?

[Robert S]

I created this which is designed to fill the entire available window
with the plugin box:

http://footstepsofthebuddha.googlepages.com/ge_plugin_popout.html

The inner div in each balloon seems to have broken positioning and I
can't quite figure out why. Perhaps this is a bug related to the way I
have the plugin box positioned?

Another issue is that I was unable to place the box with the buttons
over the plugin box using absolute positioning no matter what I had
the z-axis set to. Instead I ended up leaving some space at the top to
expose the buttons.

BTW, it might be nice if the balloon divs had classes associated with
them so that you could fix the styles with CSS. If you happen to have
a page that does something nasty with CSS (like style h3) it may be
useful to force the style for the balloon elements back to something
reasonable. Notice the balloon style issues on this page:

http://footstepsofthebuddha.googlepages.com/footstepsofthebuddha2

(In this case the h3 style is coming from the googlepages template,
and I'm not even sure exactly why the text is centered. I know
googlepages doesn't realy support this properly and using this there
is a bit of a hack anyway.)

I realize that a workaround is to build the balloon text from scratch
something like this:

balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(fc);
balloon.setMaxWidth(300);
balloon.setMaxHeight(400);
balloon.setContentString(
'<div class="balloon"><h3>'+fc.getName()+'</h3>'
+fc.getDescription()+'</div>');
ge.setBalloon(balloon);

Then define css for class 'balloon' and children.

[barryhunter [KML Guru]]

On May 31, 1:00 pm, Robert S wrote:
> I created this which is designed to fill the entire available window
> with the plugin box:
>
> http://footstepsofthebuddha.googlepages.com/ge_plugin_popout.html
>
> The inner div in each balloon seems to have broken positioning and I
> can't quite figure out why. Perhaps this is a bug related to the way I
> have the plugin box positioned?

Use margin-top rather the padding-top.

But that still leaves your 100% height div actully bigger than the
page - causing ugly scroll bars .... (I've tried every which way to
stop that, but cant find anything)

[Robert S]

On May 31, 9:49 am, barryhunter [KML Guru] wrote:
> Use margin-top rather the padding-top.
>
> But that still leaves your 100% height div actully bigger than the
> page - causing ugly scroll bars .... (I've tried every which way to
> stop that, but cant find anything)

Odd... I haven't changed anything and now I am getting a box for the
plugin that is bigger than the window even using padding-top. Did one
of the developers change something? Going back through my SVN archive,
it looks like even the very first version of this is now exhibiting
this behavior.

If I don't use padding or margin then I can fill the whole window, but
I can't superimpose any of my own control buttons on it.

Is there an officially supported way of getting the plugin to fill an
entire window, and still allow the display of control buttons, without
scrollbars or style problems?

[Robert S]

I think this now works properly using absolute positioning. (I was
sure I had tried this before but maybe not, or maybe something has
changed.)

#map3d_container {
position: absolute;
top: 2em;
left: 0px;
right: -0px;
bottom: -0px;
}
#map3d {
height:100%;
width: 100%;
}

Here's an ugly hack to style the div inside the balloon. The div is
always added just before the end of the body, then absolutely
positioned inside the baloon, so add something like this just before
the </body> tag:

<span id="last_ele"/>
</body>

Then use the sibling CSS selector to select the balloon div:
#last_ele + div {
text-align: left;
}

The correct thing to do is probably use a custom balloon style
template in the KML, then use element IDs in that and style those
using CSS, though that still wouldn't let you refer to the outer div
should you really need to do that for some reason.

Interesting that a dynamically added div can display over top of the
plugin box, but my div that's defined in the page html can't.