<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
No ideas about this one?<br>
<br>
Adrian Popa wrote:
<blockquote cite="mid:4AFD0A9F.6070809@romtelecom.ro" type="cite">
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
I did some more digging and it seems the png image which has the
elements (borders) of the framed cloud has rather small dimensions: <br>
# file
cloud-popup-relative.png
<br>
cloud-popup-relative.png: PNG image data, 676 x 736, 8-bit colormap,
non-interlaced<br>
<br>
I edited the file and increased the width of the image to 1276. I
"streched" the popup window to use the whole width. I looked into
openlayers/lib/OpenLayers/Popup/FramedCloud.js and expanded the default
sizes for the image and the popup to fit the new image size. If I test
this setup, the popup extends ok around my content, but the right-most
side of the popup loses its rounded corners. Also the "connector" (I
guess it's called a stem) between the marker and the popup is sometimes
distorted or blank.<br>
<br>
This has to do with the definitions of offsets in the positionBlocks.
Eg:<br>
<br>
positionBlocks: { <br>
"tl": { <br>
'offset': new OpenLayers.Pixel(44, 0), <br>
'padding': new OpenLayers.Bounds(8, 40, 8, 9), <br>
'blocks': [ <br>
{ // top-left <br>
size: new OpenLayers.Size('auto', 'auto'), <br>
anchor: new OpenLayers.Bounds(0, 51, 22, 0), <br>
position: new OpenLayers.Pixel(0, 0) <br>
}, <br>
{ //top-right <br>
size: new OpenLayers.Size(22, 'auto'), <br>
anchor: new OpenLayers.Bounds(null, 50, 0, 0), <br>
position: new OpenLayers.Pixel(-638, 0) <br>
}, <br>
{ //bottom-left <br>
size: new OpenLayers.Size('auto', 19), <br>
anchor: new OpenLayers.Bounds(0, 32, 22, null), <br>
position: new OpenLayers.Pixel(0, -631) <br>
}, <br>
{ //bottom-right <br>
size: new OpenLayers.Size(22, 18), <br>
anchor: new OpenLayers.Bounds(null, 32, 0, null), <br>
position: new OpenLayers.Pixel(-638, -632) <br>
}, <br>
{ // stem <br>
size: new OpenLayers.Size(81, 35), <br>
anchor: new OpenLayers.Bounds(null, 0, 0, null), <br>
position: new OpenLayers.Pixel(0, -688) <br>
} <br>
] <br>
}, <br>
...<br>
<br>
Can somebody explain the following:<br>
1. bottom-right, bottom-left, top-right, top-left are intended to
"carve-out" the rounded popup corners?<br>
2. what is "stem" supposed to be?<br>
3. How is the position coordinates measured from the file? What do
negative coordinates mean (are they measuring from right to left)? <br>
4. Is there a more automated way to update these offsets from a file -
or should they be imputed by hand - and trial and error?<br>
5. Is anyone else interested in wider popups? Usualy you shouldn't need
them on normal screens, but I need to display them on large 4000x4000
screens... If there are people interested, I will submit a patch...<br>
6. Oh - is there a way to get wider popups without editing the
image/offsets? I guess the background of the picture is not "streched"
to fit the popup (current behavior).<br>
<br>
Thanks,<br>
Adrian<br>
<br>
Adrian Popa wrote:
<blockquote cite="mid:4AFAC2E1.7050809@romtelecom.ro" type="cite">
<pre wrap="">Update:
- it seems I was partially wrong. The div settings for the decoration
divs are correct - but it seems the popup background image doesn't get
any larger... I will look into it.
Adrian Popa wrote:
</pre>
<blockquote type="cite">
<pre wrap="">Hello everyone,
I have done some more digging, and it seems the FramedCloud popup has
a default maximum width of 600px (or so it seems when I inspect items
with firebug). I tried to set max size to something larger
(popup.maxSize = new OpenLayers.Size(1300, 1000);) and it seems to
work (partially).
The popup gets larger to accomodate content with width greater than
600px, but not all the popup's decorations are streched.
My popup's base id is "activeAlarm" - and from what I can tell the
following divs get resized:
* activeAlarm_contentDiv
* activeAlarm_GroupDiv
* activeAlarm
... but the following divs don't get resized:
* activeAlarm_FrameDecorationDiv_1
* activeAlarm_FrameDecorationDiv_2
* activeAlarm_FrameDecorationDiv_3
* activeAlarm_FrameDecorationDiv_4
I have attached an image that illustrates this. Note that also the
background of the popup isn't streched (remains transparent) (most
likely it's one of the decoration divs...).
Is this a known bug, or am I doing something wrong? If it's a bug, is
there a quick workaround? I can think of setting the width parameter
for all the decoration divs, but I'm hoping it won't be necessary...
Thanks,
Adrian
Adrian Popa wrote:
</pre>
<blockquote type="cite">
<pre wrap="">Hello everyone,
If this subject has been discussed before, please point me to the
relevant thread.
I have a FramedCloud popup which gets its content through an ajax
call. Everything works ok (the popup is the same size as the
content) if I don't change the size of the fonts in the popup. In
some cases, I have to override the default font size and make it
bigger. In these cases, the popup doesn't resize properly. For
instance, if the content has 'font-size: 11px' it fits the popup, but
if the content has 'font-size: 22px', the popup grows in height, but
the width remains the same as the first case.
By the way, my content is usually a table (which has applied the
style='font-size: 22px;' attribute).
My questions are:
1. Is this behavior a known problem or should autoResize work without
problems?
2. I could call - as a workaround a function to autoRezise the popup
after the ajax call completes. Question is - what is this function?
(I haven't found anything in the api)
3. I could set maxSize/minSize - but I have no idea how to calculate
the width/height of my content (in case there are no other
workarounds I could *estimate* it based on number of characters per
line + font size - but it's way too cumbersome to be a real solution)
Thanks,
Adrian.
_______________________________________________
Users mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated"
href="mailto:Users@openlayers.org">Users@openlayers.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext"
href="http://openlayers.org/mailman/listinfo/users">http://openlayers.org/mailman/listinfo/users</a>
</pre>
</blockquote>
</blockquote>
<pre wrap=""><!---->
_______________________________________________
Users mailing list
<a moz-do-not-send="true" class="moz-txt-link-abbreviated"
href="mailto:Users@openlayers.org">Users@openlayers.org</a>
<a moz-do-not-send="true" class="moz-txt-link-freetext"
href="http://openlayers.org/mailman/listinfo/users">http://openlayers.org/mailman/listinfo/users</a>
</pre>
</blockquote>
<br>
<pre wrap="">
<hr size="4" width="90%">
_______________________________________________
Users mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Users@openlayers.org">Users@openlayers.org</a>
<a class="moz-txt-link-freetext" href="http://openlayers.org/mailman/listinfo/users">http://openlayers.org/mailman/listinfo/users</a>
</pre>
</blockquote>
<br>
</body>
</html>