topic Re: iframe scrolling on map div in ArcGIS JavaScript Maps SDK Questions

iframe scrolling on map div

AndrewFarrar — Tue, 01 Dec 2015 20:11:54 GMT

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

Re: iframe scrolling on map div

TyroneBiggums — Tue, 01 Dec 2015 20:55:31 GMT

http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Re: iframe scrolling on map div

ChrisSmith7 — Tue, 01 Dec 2015 21:00:44 GMT

Andrew,

I got it to work if I added

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

to the HTML tag within your iframe:

Re: iframe scrolling on map div

ChrisSmith7 — Tue, 01 Dec 2015 21:07:27 GMT

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

Re: iframe scrolling on map div

AndrewFarrar — Tue, 01 Dec 2015 22:07:30 GMT

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.

Re: iframe scrolling on map div

AndrewFarrar — Tue, 01 Dec 2015 22:08:53 GMT

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.

Re: iframe scrolling on map div

TyroneBiggums — Wed, 02 Dec 2015 13:03:56 GMT

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

Re: iframe scrolling on map div

ChrisSmith7 — Wed, 02 Dec 2015 14:23:29 GMT

Maybe with the object tag?

Re: iframe scrolling on map div

TyroneBiggums — Wed, 02 Dec 2015 14:40:43 GMT

Yea, and/or embed... for HTML5

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

Re: iframe scrolling on map div

ChrisSmith7 — Sat, 11 Dec 2021 07:37:42 GMT

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>

Re: iframe scrolling on map div

ChrisSmith7 — Wed, 02 Dec 2015 14:52:50 GMT

I created a mock-up with the object embedded on a simple HTML page... I tried swipe scrolling emulating an iPhone in Chrome... the issue remains.

Re: iframe scrolling on map div

TyroneBiggums — Wed, 02 Dec 2015 15:04:53 GMT

Well, we gave it the ol' college try. I would have definitely have blamed iframes alone.

I'm out of ideas but I'm going to still follow this in case I ever need to tackle this.

Re: iframe scrolling on map div

AndrewFarrar — Thu, 03 Dec 2015 15:26:57 GMT

Thanks for the help and suggestions everyone! I didn't have any luck with the embed and object tags either. The only way I could get the swiping to work was disabling the mouse-events on the div that the iframe sits within. Of course that renders the app completely useless. I'll keep the forum posted if I come across any other solutions/workarounds

Re: iframe scrolling on map div

ChrisSmith7 — Thu, 03 Dec 2015 15:31:21 GMT

I wonder - could you try self-hosting the API and digging-in to see if the API is doing something funky when you disable panning/zooming? Maybe you could create a custom fix...

Re: iframe scrolling on map div

TyroneBiggums — Mon, 07 Dec 2015 12:32:43 GMT

Have either of you tried embedding another, lighter, website instead of the map? Maybe try to jam google.com in there to confirm that it's actually the API? I can't remember if this was mentioned.