Issues with Popup on Mobile | Displays Mostly Off Screen

429
6
Jump to solution
08-30-2019 11:17 AM
ParkerWelch
New Contributor III

Hey all, welcome to another post about ArcGIS API for Javascript moving popups off screen on mobile devices! 

I've seen a few threads, including this one, and this one, and this one, whose solutions include adjusting CSS and adjusting JavaScript properties, but none of those solutions have worked for my case.

The frustrating part is that it works as expected in Chrome Developer Tools (below)

But it doesn't work on my mobile device!

This is a screenshot of the current behavior from my mobile device using Google Chrome.

screenshot

It seems to be docked in the lower-right corner since when I pan around the view, the pop-up stays put.

Of the suggested fixes, I tried the following:

dockEnabled:false,
dockOptions:{
buttonEnabled: false,
breakpoint: true,
position: "bottom-center"
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and, even though I think dockEnabled:true will nullify the breakpoint behavior, I tried:

dockEnabled:true,
dockOptions:{
buttonEnabled: false,
breakpoint: true,
position: "bottom-center"
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I tried adjusting CSS by setting

.esri-popup__main-container esri-widget esri-popup--shadow {
width:100%
}

but that was really just a desperate shot in the dark. I', not sure what other CSS I could adjust as there is no container set on the popup.

My app is broken apart into separate HTML, CSS, JS so pasting the entire code is a bit tricky, but here is my JS to create the view and the popup, where everyLayer is an array of my map layers. There may be some sweet spot between adjusting dockEnabled, dockOptions, etc, but this is what I currently am trying :

view = new MapView({
container: "viewDiv",
map: hybrid,
zoom: 14,
center: [-122.068564,36.999662],
layerViews:everyLayer,
popup:{
highlightEnabled: true,
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false,
position:"bottom-center"
}
}
})

 

From all my research, I'm guessing the solution is somewhere in the one or a few of the following:

  • override default CSS
  • attach popup after I create the view, not at the same time
  • update Chrome/Safari on my mobile device
  • adjust dockOptions/dockEnabled

Any thoughts anyone may have would be greatly appreciated, especially the wizard of ArcGIS API for JS Robert Scheitlin, GISP‌.

I'm happy to provide any more information that could help,

Thanks,

0 Kudos
1 Solution

Accepted Solutions
ParkerWelch
New Contributor III

So it looks like it was my mobile device OS that was causing unexpected behavior.

I updated my device OS and got the behavior I was expecting, with the popup docking bottom center.

I suppose I can't force everyone to update their OS, but might include a disclaimer about unexpected behavior with an old OS.

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

What is your mobile device size?

What happens on that mobile device when you do not specify any popup property in the mapview constructor?

view = new MapView({
container: "viewDiv",
map: hybrid,
zoom: 14,
center: [-122.068564,36.999662],
layerViews:everyLayer
})
0 Kudos
ParkerWelch
New Contributor III

Hey Robert - thanks for chiming in.

  • My device is an iPhone 6, which I believe has a viewport size of 375 x 667 based on a quick google search.
  • I tried removing the popup property in the mapview constructor and got the same behavior.
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Parker,

  It has to be something specific about your app/code/css then. Visit this link on your iPhone and you will see that the popup defaults to dock at the bottom of the app.

https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/live/index.html 

0 Kudos
ParkerWelch
New Contributor III

Shoot I was afraid of that. Deconstructing an entire app I built while learning does not seem fun.

My first attempt to troubleshoot led me to double-check that I didn't overwrite any CSS for any child HTML elements involved in the popup. I can confirm that my CSS does not have any rules set for the child elements of the element representing the div.esri-popup__main-container esri-widget esri-popup--shadow, which are header, article, and section.

Maybe I did that wrong?

My next idea is to set dockEnabled to false so that the popup emerges directly from the clicked feature, then, on popup render complete, use the reposition() method on the popup object, which I think should adjust the view to include the whole popup according to the help documentation here

Do you have any experience with the reposition() method?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Parker,

   Yep popup.reposition() is suppose to adjust the view to include the popup.

0 Kudos
ParkerWelch
New Contributor III

So it looks like it was my mobile device OS that was causing unexpected behavior.

I updated my device OS and got the behavior I was expecting, with the popup docking bottom center.

I suppose I can't force everyone to update their OS, but might include a disclaimer about unexpected behavior with an old OS.

View solution in original post

0 Kudos