ArcGIS API 4.1 Inside Bootstap Layout Breaks PopupTemplate

chuckfrank — Wed, 23 Nov 2016 19:54:04 GMT

Hi All,

I've got a page that uses a bootstrap layout and a 4.1 map as one of the elements of the page. One of the feature layers is using popup templates to display attributes and everything works fine at a large screen size, but when I change the size of the screen I'm noticing that where I click on the map is not where the popup thinks I'm clicking. I've been having to click below/south of the points to actually display a popup, and as I decrease the size of the screen the problem gets worse. If remove all of the other elements of the page and leave only the map, it works fine, and that includes leaving the references to bootstrap (below):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">

<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://js.arcgis.com/4.1/"></script>

But even if I put a header on the page it shifts or breaks the popup functionality. For a test, I rewrote the page in 3.18 and it didn't have the same problem, but the InfoTemplates and functionality are not as good for a mobile web page. Does anybody have an suggestions about how to resolve this problem for 4.1 inside of a bootstrap layout? I'd be glad to supply the full web page and script.

Thanks,
Chuck

topic ArcGIS API 4.1 Inside Bootstap Layout Breaks PopupTemplate in ArcGIS JavaScript Maps SDK Questions

ArcGIS API 4.1 Inside Bootstap Layout Breaks PopupTemplate