Community

iframe scrolling on map div

5804
14
12-01-2015 12:11 PM
AndrewFarrar
by
Occasional Contributor
‎12-01-2015 12:11 PM

Hello,

I have a question that is probably more general web dev related than javascript api related, but I figured this would be the place to start.  I have a small javascript app that I am integrating into our webpage CMS through an iframe.  I've disabled the map pan and zoom functions in javascript so that users can't interact with the map other than click on the polygons to take them to another webpage.  My issue comes with viewing this webpage on a mobile device.  Whereas a user will typically swipe upward on a phone to scroll the page down, this functionality seems to be disabled when the user tries to swipe over the map div.  interestingly enough, if the user swipes over any of the other divs, (logo, button, title), it will scroll just fine.  I would like the user to be able to scroll over the entire page, including everything in the iframe.  I thought it might have something to do with content overflow in the iframe, so I tried setting the iframe in a div and styling that to:

overflow: hidden;

That didn't work either.  Has anyone else experienced this behavior with esri map divs?

edit:

here is the link to the iframed page:

Frederick County : Testmappage

0 Kudos
14 Replies
AndrewFarrar
by
Occasional Contributor
‎12-01-2015 02:08 PM

Thanks for the article on responsive design Tyrone, good tips on sizing in there.  I tried to make the app as responsive as I could so that it re-sizes nicely. 

0 Kudos
ChrisSmith7
by
Frequent Contributor
‎12-01-2015 01:00 PM

Andrew,

I got it to work if I added

  overflow: auto;
  -webkit-overflow-scrolling: touch;

to the HTML tag within your iframe:

0 Kudos
ChrisSmith7
by
Frequent Contributor
‎12-01-2015 01:07 PM

Well, it was working... I just tried to reproduce it, unsuccessfully.

0 Kudos
AndrewFarrar
by
Occasional Contributor
‎12-01-2015 02:07 PM

Thanks for the response Chris.  I tried adding those lines to the mapdiv itself, which then overflowed and scrolled within the iframe.  that still didn't scroll the whole parent frame though.  I added it to the styling for the iframe and iframe wrapper div within my CMS as well to no avail. 

0 Kudos
TyroneBiggums
by
Occasional Contributor III
‎12-02-2015 05:03 AM

What about using a different container in lieu of an iframe?

0 Kudos
ChrisSmith7
by
Frequent Contributor
‎12-02-2015 06:23 AM

Maybe with the object tag?

0 Kudos
TyroneBiggums
by
Occasional Contributor III
‎12-02-2015 06:40 AM

Yea, and/or embed... for HTML5

http://stackoverflow.com/questions/8702704/alternative-to-iframes-with-html5

0 Kudos
ChrisSmith7
by
Frequent Contributor
‎12-02-2015 06:45 AM

Something like so:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Map</title>
</head>
<body>
<style>
#gisdiv, .html {
    width: 800px;
    height: 600px;
    overflow: hidden;
  display: block;
}
</style>
<div id="gisdiv">
  <object data="http://gis2.co.frederick.va.us/AdminBOS/" width="100%" height="100%">
  <embed src="http://gis2.co.frederick.va.us/AdminBOS/" width="100%" height="100%"></embed>
  </object>
</div>
</body>
</html>
0 Kudos