Embedded map in Sharepoint using an <iframe> tag?

[VenusScott]

I created a map using AGOL WAB online and had the user embed the map the City's website. When the map is viewed on a tablet or phone, the locator defaults to the right side of the map as opposed to the left. When building a map and displaying on a PC, it defaults to the left side of the map? Is there something in the <iframe> tag that changes the location of the locator object? Here is the code:

<iframe width="940" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=..."></iframe><br /><small><a href="http://phoenix.maps.arcgis.com/apps/webappviewer/index.html?id=e91cf487650749499ee5ebef709d2ef0" target="_blank">View Mobile / Larger Map</a></small>

Nothing is jumping out at me as to why on a mobile device it would display differently?

[VenusScott]

Can anyone provide me with insight on the "webappviewer" and maybe this is my issue?

[VenusScott · Accepted solution]

I got with ESRI support and this issue was submitted as an ''enhancement'' for future release.

[KellyHutchins]

The locator should always display on the right. I ran a few tests and in my testing the locator is on the right in both my phone and desktop.

http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=...

In your case I think the issue may be that the frame width is set as 940 which means its wider than the mobile screen and part of the map will be outside the view.  In general its tricky to get content embedded in an iframe to be responsive. Haven't tried it but perhaps the info in this article will help.

Making Embedded Content Work In Responsive Design - Smashing Magazine

[KellyHutchins]

Another option that might work if you just need the width to change and aren't worried about the height would be to just set the width to 100%. Here's an example showing this:

<iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=..."></iframe><br /><small><a href="http://phoenix.maps.arcgis.com/apps/webappviewer/index.html?id=e91cf487650749499ee5ebef709d2ef0" target="_blank">View Mobile / Larger Map</a></small>