I have the following problem and it has cost me already a lot of hairpulling, so I thought I'd share the problem with you. I've come across two different example sites where #1 also has the problem, but #2 doesn't.

1. If you go to a example page (on desktop) of popups with Openlayers: http://jorix.github.com/OL-FeaturePopups/examples/feature-popups.html , You will see that when you click the marker in India, a popup will open with a scrollbar and you are able to scroll the content. When navigating this site with a tablet or phone, you're not able to scroll / swipe / drag within the popup.

2. I you visit the site http://openlayers.org/dev/examples/getfeatureinfo-popup.html (desktop) and click on the blue area in the bottom of the map, you also see a scrollbar and are able to scroll. When navigating this page with tablet or mobile phone, scrolling the popup DOES work.

I experience the same problems on my site as #1, but am unable to fix it. I've copied styles etc. from the second example, but to no avail.

Anyone else has this problem?

Comments

gleroux02’s picture

gleroux02 CreditAttribution: gleroux02 commented

I can confirm this issue as well. As far as I can tell it is not an issue with styling. If you move the popup outside of the open layers event wrapping div the popup scrolls just fine. There is some behavior that is being applied to that wrapping div that causes the scrolling to fail. I've also noticed that while the popup is being re-positioned scrolling still works, it is only after the map an the popup have been re-positioned where it fails to scroll.

Also found someone else having this issue in the openlayers ticketing system: http://trac.osgeo.org/openlayers/ticket/3403#comment:14

Nitebreed’s picture

Nitebreed
Primary language Dutch
CreditAttribution: Nitebreed commented
lavms’s picture

lavms CreditAttribution: lavms commented

Hi,
I have the same problem with the popup scroll bars when using ipads/iphones(didn't check with tablets). There's no way to see the whole content. Anyone found a solution for this? Please let me know.

Thanks
Regards
lavms

augustus.kling’s picture

augustus.kling CreditAttribution: augustus.kling commented

The sites are different in having static content versus loading an image into the popup. In the static case (openlayers.org) the size of the popup's content can be computed when the popup is shown, in the other case the content of the popup expands as soon as the image is fully loaded.
OpenLayers tries to avoid scrollbars when they are unneeded (popup size greater than popup content). It does the check when a popup is about to be shown and thus cannot react to an image that increases the popup content thereafter. The effect can be seen when accessing the jorix.github.com-demo with an empty cache versus a cache containing the image (a simple reload won't do to reproduce, though).

That being said, there are two options to get rid of the problem:
1) Define the width and height of the image in the HTML so that the image is not required to be loaded when calculating the content size.
2) Force the presence of the scrollbar. To do so edit OpenLayers.Popup.prototype.updateSize where the overflow-values are set. The mentioned site does already override OpenLayer's default implementation so this should be okay.

lavms’s picture

lavms CreditAttribution: lavms commented

Hi augustus,
Thank you so much for taking time to answer my question. I'm using the openlayers latest version, 7.x-2.0-beta7. In my scenario I load a set of values from a view to the popup. Size of the popup can vary with the amount of data it loads. Therefore I think the second option you have suggested is the one that suits me. But I couldn't find the file to edit overflow values. Could you please help me on this?

Many thanks

augustus.kling’s picture

augustus.kling CreditAttribution: augustus.kling commented

I'm sorry lavms but I cannot reproduce your problem. I do only see the effect on the initially mentioned page where the default implementation of OpenLayers is overridden. The popups work fine on other pages and when I try to reproduce locally.

Anyway, look for an element within the popup element that has the class olFramedCloudPopupContent. This is the element that holds the popup's content and is required to display the scrollbars in case the content gets too big. Ensure overflow: auto is in effect.

lavms’s picture

lavms CreditAttribution: lavms commented

Thank you for your reply. I haven't overridden the default css file. I checked for the class olFramedCloudPopupContent and overflow property is set to auto. But still I can't scroll through the popup on ipad or iphone. Apart from this map I have few other blocks with scroll bars on this site. Even though scroll bars are not visible for those blocks on ipads/iphones etc.., it is still possible to scroll through the contents. But it doesn't work like that for the popups I have on my map.

I created an openlayers map and use cluster and popup features only. Everything else is set to default values. I have to use cluster features as there are many nodes which refer to the same location on the map. Since I use the cluster feature, it displays a number on the map when there are 2 or more nodes for a specific location. I need to show the details about those nodes when I click on those numbers and on my desktop this works fine with scroll bars. I have more than 50 nodes for some locations and it is essential to have a popup with a scroll bar. But I can't see all the details on ipads or iphones since it doesn't allow me to scroll through.

I use a responsive theme (pixture reloaded theme) for this site. I'm not sure if it has anything to do with the theme I'm using.

It would be a great help if you could help me on this. Thanks again.