nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Code problem IE 9 and up

TimWitt2

Hey everybody,

I am having some issues with an application that I created in IE9 and higher.

Here is a link to my application: Advanced Draw

When I use it in Firefox, Google Chrome and IE 8 everything works fine. Once I switch to IE9 when I place a point, the point is displaced to the top-left. When I switch to IE10 the same happens and I have to click twice to place a point. I can't figure out what the issue could be.

If anybody has any inside!

Thanks,

Tim

Find more posts tagged with

Accepted answers

thejuskambi

Could you remove the CSS 1% margin set in the css of the application and test the same.

All comments

TomSellsted

Tim,

I agree. I think I almost spent more time trying to deal with how to make my widget work with Internet Explorer than coding it...

Regards,

Tom

TimWitt2

I'll take a look. IE is just so frustrating....

TomSellsted

Tim,

I found some event handling weirdness when creating my Measure Widget Measure Widget 1.1.1 for Web App Builder I had to use some special event handling to accommodate the differences between the versions of Internet Explorer. My problem was more related to mouse-drag or mouse-move events, but maybe you are having a similar problem?

Regards,

Tom

rscheitlin

Tim,

I can report the same results as Chris. Works in IE 11 and IE 8/9/10 emulation as well. Although I don't get the click twice issue at all.

ChrisSmith7

This works for me now in IE11. I tried it using IE 8/9/10 emulation as well, and it works, although I still need to click twice for the point to show. I don't have a "real" instance of IE <11 to test, though...

Try clearing your cache and restarting IE.

TimWitt2

Chris,

thejus's solution of removing the margin works in IE10 compatibility view but not in IE10 or IE9.

I tried your approach but no luck. Does it work here for you ( I have updated the code to include your solution.

Advanced Draw

ChrisSmith7

Tim,

Try this:

        map.on("load", function () {
            toolbar = new Draw(map);
            toolbar.on("draw-end", addToMap);
  //toolbar.on("draw-complete", addMeas);
            editToolbar = new Edit(map);
            map.on("click", function (evt) {
                editToolbar.deactivate();
            });
            createMapMenu();
            createGraphicsMenu();
            map.reposition();
            map.resize();
        });

I added "reposition" and "resize" in your map onload event handler. This worked for me when I ran it in IE's debugger.

TimWitt2

I updated the code in the link and removed the margin, but I still have the issue of displacement.

thejuskambi

Are you sure. It works for me when I remove the margin 1% from the html page.

ChrisSmith7

This may be related:

Re: Mouse cursor offset from map points in basic viewer template IE only

TimWitt2

I think you are right, since the dojo themes apply automatic margins around the map. Take a look.

thejuskambi

I am not sure why this happens, But I definitely know there is some kind of an issue with getMarginBox method and IE. for some reason the margin values are ignored. I dont have the time to look into it, If somebody does, It would be really helpful to get to the bottom of it.

TimWitt2

I tried it but still the same issues

ChrisSmith7

I think it has something to do with the bottom div - if I remove the left/top attributes of #bottom, it puts your "created by" div at the top; however, the points are no longer offset in IE.

UPDATE - I think I changed something else in addition to this as I tried to replicate the resolution and was unsuccessful.

TimWitt2

Thanks for the reply.

It lessens the offset but it is still there and so is the having to click twice issue.

ChrisSmith7

I had this problem as well - honestly, I can't remember the resolution, but I know one exists! I'll see if I can dig it up...

thejuskambi

Could you remove the CSS 1% margin set in the css of the application and test the same.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.