nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup doesn't scroll content on iPad

ShawnHolyoak

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

ShawnHolyoak

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!

All comments

deleted-user-byYNSf-f9ge6

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.

DavidButz

Thanks Shawn, this helped me out

Noah Sager

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

ShawnHolyoak

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.

ShawnHolyoak

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.

LuciHawkins

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

Noah Sager

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.

ShawnHolyoak

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));
  }

Noah Sager

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.