popup position

[sundussabbah]

Hello,

I add to my map a popup

var popup = new Popup({
  fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
   new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
   new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])),
  titleInBody: true
  }, domConstruct.create("div"));

  domClass.add(popup.domNode, "myTheme");

and set its content:

 var information = new PopupTemplate({
   "title": "{Field name}",
   "fieldInfos": [{
   "fieldName": "Field name",
   "format": {
   "places": 2,
   "digitSeparator": true
  }
  }, {
   "fieldName": "Field name",
   "format": {
   "places": 2,
   "digitSeparator": true
  }
  }],
   "description": " html content"  
   
  });

and set this popupTemplate object to the featureLayer and set popup object to map

the problem is that the position of popup does not fit with screen look to image:

as you see if the feature is not on center of screen but on sides, the popup is displayed like this

this is a mobile application and mobile screen

please help as you fast as you can

and if there is another component can do this better please tell me

thanks.

[ChrisSmith7]

Would manually setting an anchor help you at all? If you're using the Popup class, it's actually supposed to compute this automatically by default... Maybe setting it to the middle would decrease the effects of having the pop-up appear off screen.

https://developers.arcgis.com/javascript/jsapi/popup.html#anchor

Also, reposition may be helpful:

https://developers.arcgis.com/javascript/jsapi/popup.html#reposition

I've had similar issues in the past embedding maps within an iFrame - the pop-up would appear slightly out-of-frame... if the point feature is too far out, the anchor should reset upon re-opening (say from right/center to left), but this doesn't always happen, I've noticed. I've made a lot of changes recently, and it seems it does a better job now, so it may have been an issue with the container... I'm not sure.

I wonder if you could manually have the pop-up repositioned after a feature/map event, say a pan/zoom end. I'm trying this now...

[ChrisSmith7]

Seems to work - try this example in the sandbox:

ArcGIS API for JavaScript Sandbox

Adding something like this appears to help a bit when the pop-up is panned off-screen:

        map.on("pan-end", reposition);
        function reposition() {
          if (popup.isShowing === true){
            popup.reposition();
            console.log('pop-up repositioned...');
          }
        }

I added this bit of code right after line 125.

[sundussabbah]

thank you for reply, but unfortunately, nothing change!!

[ChrisSmith7]

Strange - what version of the API are you using? I did a bit more digging and found another user described a similar situation, though they did not attach a screen capture, so I can't be sure. Have a look at the discussion in:

InfoWindoLite popup spilling off of map on mobile or small browser window

There's also a link with a solution that worked for some people here:

Auto-panning map so that infowindow is fully visible

[SrihariManepalli]

This approach worked for me. Thanks!

[jimmiraza]

Thanks this works for me.