[OpenLayers-Users] Forcing FramedCloud autoResize when using
stylesheets
Adrian Popa
adrian_gh.popa at romtelecom.ro
Fri Nov 13 02:28:31 EST 2009
I did some more digging and it seems the png image which has the
elements (borders) of the framed cloud has rather small dimensions:
# file
cloud-popup-relative.png
cloud-popup-relative.png: PNG image data, 676 x 736, 8-bit colormap,
non-interlaced
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.
This has to do with the definitions of offsets in the positionBlocks. Eg:
positionBlocks: {
"tl": {
'offset': new OpenLayers.Pixel(44, 0),
'padding': new OpenLayers.Bounds(8, 40, 8, 9),
'blocks': [
{ // top-left
size: new OpenLayers.Size('auto', 'auto'),
anchor: new OpenLayers.Bounds(0, 51, 22, 0),
position: new OpenLayers.Pixel(0, 0)
},
{ //top-right
size: new OpenLayers.Size(22, 'auto'),
anchor: new OpenLayers.Bounds(null, 50, 0, 0),
position: new OpenLayers.Pixel(-638, 0)
},
{ //bottom-left
size: new OpenLayers.Size('auto', 19),
anchor: new OpenLayers.Bounds(0, 32, 22, null),
position: new OpenLayers.Pixel(0, -631)
},
{ //bottom-right
size: new OpenLayers.Size(22, 18),
anchor: new OpenLayers.Bounds(null, 32, 0, null),
position: new OpenLayers.Pixel(-638, -632)
},
{ // stem
size: new OpenLayers.Size(81, 35),
anchor: new OpenLayers.Bounds(null, 0, 0, null),
position: new OpenLayers.Pixel(0, -688)
}
]
},
...
Can somebody explain the following:
1. bottom-right, bottom-left, top-right, top-left are intended to
"carve-out" the rounded popup corners?
2. what is "stem" supposed to be?
3. How is the position coordinates measured from the file? What do
negative coordinates mean (are they measuring from right to left)?
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?
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...
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).
Thanks,
Adrian
Adrian Popa wrote:
> 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:
>
>> 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:
>>
>>> 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
>>> Users at openlayers.org
>>> http://openlayers.org/mailman/listinfo/users
>>>
>>>
>>>
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20091113/6d489263/attachment.html
More information about the Users
mailing list