Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?

IanPeebles — Tue, 24 Jun 2014 20:55:53 GMT

I have been testing a JavaScript application in Internet Explorer version 11. I am using the navigation tools widget. For some reason, when drawing an extent box for the zoom in or zoom out, the box does not appear. By default, in I.E. 9 and 10 the extent box outline displays in red with a greyish transparent box.

Anyone else have this issue? I am using JavaScript API version 3.9. The zoom draw outline shows up in Google Chrome and FireFox.

Any help or ideas will greatly be appreciated.

Re: Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?

IanPeebles — Sat, 11 Dec 2021 15:31:42 GMT

Here is a sample of my code for the navigation widget. This works fine in IE 9 and IE 10, but not IE 11. Again, I am using the 3.9 API.

Tool is located within the index.html page.


Icons

LINE
13      .zoominIcon {background-image:url(images/nav_zoomin.png); width:22px; height:22px; }
14      .zoomoutIcon {background-image:url(images/nav_zoomout.png); width:22px; height:22px; }
15      .zoomfullextIcon {background-image:url(images/nav_fullextent.png); width:22px; height:22px; }
16      .zoomprevIcon {background-image:url(images/nav_previous.png); width:22px; height:22px; }
17      .zoomnextIcon {background-image:url(images/nav_next.png); width:22px; height:22px; }
18      .panIcon {background-image:url(images/nav_pan.png); width:22px; height:22px; }
19      .deactivateIcon {background-image:url(images/nav_deactivate.png); width:22px; height:22px; }

Reference

LINE
177      dojo.require("esri.toolbars.navigation");


Variable

LINE
256     // Navigation Toolbar  
257    var navToolbar;


Navigation Tool

LINE    // Navigation Tools                                                                                                                                           *
314     navToolbar = new esri.toolbars.Navigation(map);
315
316     dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
317  
318     function extentHistoryChangeHandler() {
319      dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
320      dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
321     }


Webpage

LINE

<!-- DEFINES NAVIGATION TOOLBAR -->
<div id="navToolbar" class="header" data-dojo-type="dijit.layout.ContentPane" dojoType="dijit.Toolbar" data-dojo-props="region:'top'" >
    
<div id="zoominToolFrame">
<div dojotype="dijit.form.Button" title="Zoom In" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);"></div>
</div>
       
<div id="zoomoutToolFrame">
<div dojotype="dijit.form.Button" title="Zoom Out" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);"></div>
</div>
    
<div id="zoomfullextentToolFrame">
<div dojotype="dijit.form.Button" title="Zoom to Full Extent" id="zoomfullextent" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();"></div>
</div>
    
<div id="zoomprevToolFrame">
<div dojotype="dijit.form.Button" title="Zoom to Previous Extent" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();"></div>
</div>
    
<div id="zoomnextToolFrame">
<div dojotype="dijit.form.Button" title="Zoom to Next Extent" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();"></div>
</div>
    
<div id="panToolFrame">
<div dojotype="dijit.form.Button" title="Pan" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);"></div>
</div>
    
<div id="deactivateToolFrame">
<div dojotype="dijit.form.Button" title="Deactivate Navigation Tools" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()"></div>
</div>
    
<div id="cleargraphicsToolFrame">
<div dojotype="dijit.form.Button" title="Clear Grapics" id="cleargraphics" iconClass="cleargraphicsIcon"></div>
</div>
    
<div id="idenitfyFormButtonToolFrame">
<div dojotype="dijit.form.Button" title="Identify Feature" id="idenitfyFormButton" iconClass="identifyIcon" onClick="identifyTool()"></div>
</div>
    
<div id="editFormButtonToolFrame">
<div dojotype="dijit.form.Button" title="Data Editor Form" id="editFormButton" iconClass="editattributesIcon" onClick="editTool()"></div>
</div>

Re: Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?

AdrianMarsden — Mon, 14 Jul 2014 08:44:18 GMT

This is a known issue - several other threads lurking, good luck finding them :

You need to force IE9 on the code

Sorry - can't find the CODE flag on the new edit bar

topic Re: Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11? in ArcGIS JavaScript Maps SDK Questions

Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?

Re: Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?

Re: Navigation Widget - Zoom In and Zoom Out Draw Outline not displaying in I.E. 11?