Popup doesn't scroll content on iPad

7934
10
Jump to solution
04-21-2014 01:45 PM
ShawnHolyoak
Occasional Contributor
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?
1 Solution

Accepted Solutions
ShawnHolyoak
Occasional Contributor
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!

View solution in original post

0 Kudos
10 Replies
Noah-Sager
Esri Regular Contributor
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
0 Kudos
ShawnHolyoak
Occasional Contributor
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));
  }
0 Kudos
Noah-Sager
Esri Regular Contributor
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.
0 Kudos
LuciHawkins
Occasional Contributor III
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
0 Kudos
ShawnHolyoak
Occasional Contributor
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.
0 Kudos
ShawnHolyoak
Occasional Contributor
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.
0 Kudos
ShawnHolyoak
Occasional Contributor
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!
0 Kudos
deleted-user-byYNSf-f9ge6
New Contributor

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.

Noah-Sager
Esri Regular Contributor
That's great, thank you for sharing the solution!
0 Kudos