topic Re: Popup doesn't scroll content on iPad in ArcGIS JavaScript Maps SDK Questions

Popup doesn't scroll content on iPad

ShawnHolyoak — Mon, 21 Apr 2014 20:45:22 GMT

I've a popup info window that displays the information from all identifies. When the content exceeds the default length of the info window, a scroll bar appears and the user can view all the content. The problem is, when I view my site on the iPad, the scroll bar doesn't appear in the info window. All the content is there, but the user can't view it. Any suggested approaches to fixing this?

Re: Popup doesn't scroll content on iPad

Noah-Sager — Tue, 22 Apr 2014 16:59:31 GMT

Hi Shawn,

I tested this in Safari on an iPad (5.1.1) and while I did not see the scroll bar, I was still able to pan down into the contents of the info window, and see all the contents there. Can you confirm if you are able to pan or scroll even without the scroll bar?

-Noah

Re: Popup doesn't scroll content on iPad

ShawnHolyoak — Sat, 11 Dec 2021 09:31:47 GMT

Hi Shawn,

I tested this in Safari on an iPad (5.1.1) and while I did not see the scroll bar, I was still able to pan down into the contents of the info window, and see all the contents there. Can you confirm if you are able to pan or scroll even without the scroll bar?

-Noah

I am not able to pan down into the contents of the info window using Safari 5.1.1 as well.

Just to anticipate the question, my identify handler is very simple, shown below.

handleIdentifyResults: function(results) {
   var countOfResults = 0;
   var content = "";
   var _this = this;
   
   results = array.filter(results, function (result) {//filter out any failed tasks
    return result.length > 0;
   }); 
  
   array.forEach(results, function (result) {
          for (var i = 0; i < result.length; i++) {
              content += "<b>" + shared.htmlEncode(result.layerName) + "</b><br>";
 
              content += "<table>";
 
              for (var member in result.feature.attributes) {
                      content += "<tr><td>" + shared.htmlEncode(member) + ":</td><td>" +
          shared.htmlEncode(result.feature.attributes[member]) + "</td></tr>";
              }
 
              content += "</table><br>";
              countOfResults++;
          }
   });
   
   var resultText;
   if (countOfResults === 1) {
    resultText = " Feature Identified";
   }  else {
    resultText = " Features Identified";
   }
   mapControl.popup.setTitle(countOfResults + resultText);
   mapControl.popup.setContent(content);
   mapControl.popup.resize(320, 250);
   mapControl.popup.show(this.clickEvt.screenPoint, map.getInfoWindowAnchor(this.clickEvt.screenPoint));
  }

Re: Popup doesn't scroll content on iPad

Noah-Sager — Wed, 23 Apr 2014 16:55:48 GMT

Can you test with this application in your iPad?

Click on a state to display the info window. I was able to scroll/pan with this.

Re: Popup doesn't scroll content on iPad

LuciHawkins — Wed, 23 Apr 2014 18:52:32 GMT

We had a similar problem and had to use the 3 finger slide to scroll up and down in a popup on the ipad.

Thanks,

Luci

Re: Popup doesn't scroll content on iPad

ShawnHolyoak — Wed, 23 Apr 2014 18:57:05 GMT

Can you test with this application in your iPad?

Click on a state to display the info window. I was able to scroll/pan with this.

I was also able to scroll/pan, but you're using an InfoWindowLite class, not the Popup class. I forked your fiddle here, and I can't scroll on the iPad using the Popup class.

Re: Popup doesn't scroll content on iPad

ShawnHolyoak — Wed, 23 Apr 2014 18:58:42 GMT

We had a similar problem and had to use the 3 finger slide to scroll up and down in a popup on the ipad.

Thanks,

Luci

I'm unsure how you did this. I tried, with multitasking gestures enabled and disabled, and I can't get the popup to scroll with 3 fingers.

Re: Popup doesn't scroll content on iPad

ShawnHolyoak — Wed, 23 Apr 2014 20:12:46 GMT

I was able to solve the issue. What I did is wrap my content in a div with an id and assign overflow-y: auto to the id via css. Now it scrolls properly on the ipad. I don't know why the esri div with class=contentPane doesn't work, as it has overflow: auto as it's csss. I'm wondering if it's related somehow to the fact that I was using a table to control the content layout. Regardless, wrapping all the content in a div with overflow-y:auto solved it. Thanks all!

Re: Popup doesn't scroll content on iPad

Noah-Sager — Wed, 23 Apr 2014 20:20:21 GMT

That's great, thank you for sharing the solution!

Re: Popup doesn't scroll content on iPad

DavidButz — Wed, 31 May 2017 16:17:40 GMT

Thanks Shawn, this helped me out

Re: Popup doesn't scroll content on iPad

deleted-user-byYNSf-f9ge6 — Thu, 29 Mar 2018 08:42:16 GMT

Thanks Shawn! I had a similar issue on all Apple devices from the moment that I used a table to control the content. I added plain text after the table and I could scroll in Apple devices again. Android doesn't seem to have any problem with a table in the popup.