search

pcirella / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

IE shifts <a> tags into focus #154

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Prerequisite: Using dynatree within a <div> element with limited width and 
'overflow: auto'.

When clicking on a title that is too long to fit (or when the first title is 
too long on initial rendering), IE8 scrolls so that the <a> element (i.e., the 
title) either fits into the viewable area, or if wider than the viewable area, 
left adjusts the <a> element. This shifts the icons out of view.  Other 
browsers (e.g., Firefox, Chrome, Safari) behave as expected.

The issue can be replicated using 
http://wwwendt.de/tech/dynatree/doc/sample-quick.html by adding style="width: 
100px; overflow: auto;"  to the <div> with id="tree".

The following code seems to trigger the behavior:

  this.span.getElementsByTagName("a")[0].focus();

and

  try { 
    $(this.span).find(">a").focus(); 
  } catch(e) { }

Original issue reported on code.google.com by a5s...@gmail.com on 30 Sep 2010 at 5:42

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 30 Sep 2010 at 6:24

GoogleCodeExporter commented 9 years ago 
v1.0 sets overflow:auto by default and supresses calls to focus when runnig on 
IE.

Original comment by moo...@wwwendt.de on 8 Nov 2010 at 7:00

GoogleCodeExporter commented 9 years ago 
Hope it's still fixed. Please report if you face problems with 1.0

Original comment by moo...@wwwendt.de on 14 Nov 2010 at 2:34

GoogleCodeExporter commented 9 years ago 
Still having this problem, with the latest stable release as well as with 
latest release candidate version.

I'm using dynatree to make a tree menu in a fixed width div. When clicking a 
node, IE shifts the dynatree horizontally. I'm using overflow hidden because I 
don't want scrollsbars, but this behaviour is unexpected.

Original comment by spiky_...@yahoo.com on 9 Mar 2012 at 1:19

GoogleCodeExporter commented 9 years ago 
I'm using latest dynatree plugin to view a tree in a fixed div. I still have 
the pb with ie8. Any suggestion is welcome.

Original comment by saber.mn...@gmail.com on 12 Mar 2012 at 10:26

GoogleCodeExporter commented 9 years ago 
considered verified

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:16

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:19

GoogleCodeExporter commented 9 years ago 
Hello,

Same problem here. Occured in all Internet Explorer version with last dynatree 
version.
One possible workaround:

$('componentid').scrollLeft(0) on onSelect and onExpand events.

But this operation does a horrible visual effect.

Original comment by nicolas....@gmail.com on 19 Dec 2012 at 4:53

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 20 Dec 2012 at 6:58

GoogleCodeExporter commented 9 years ago 
I confirm that this issue is present on both Internet Explorer 9 and Internet 
Explorer 10.

Original comment by sblendo...@gmail.com on 31 Jan 2013 at 11:51

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 10 Feb 2013 at 8:42

GoogleCodeExporter commented 9 years ago 
1.2.4 was a hotfix

Original comment by moo...@wwwendt.de on 12 Feb 2013 at 9:01

GoogleCodeExporter commented 9 years ago 
Just tried the 1.2.4, but the issue still persists. Tried on Internet Explorer 
10.0.9200.16438

Original comment by sblendo...@gmail.com on 18 Feb 2013 at 2:22

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 8 Sep 2013 at 6:35

GoogleCodeExporter commented 9 years ago 
See also:
http://stackoverflow.com/questions/10280599/disable-scrolling-when-clicking-on-a
-link

This event handler seemd to fix it (tested with IE 10)

    onClick: function(node, event) {
        event.preventDefault();
    },

Original comment by moo...@wwwendt.de on 6 Oct 2013 at 3:30

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
I am using version 1.2.5 and i am still seeing this issue on IE11 and IE10.

I believe the reported issue had two portions:
1. when user click on hyperlink text - which is taken care partially by the fix 
provided.
if(!($.browser.msie && parseInt($.browser.version, 10) < 9)){
                    aTag[0].focus();
                }
It should also include IE version 10 and 11 and future releases as well.

2. when user either click on expander icon or checkbox icon on node - this 
action triggers _onClick method which invokes focus on both of these icon 
clicks.

    focus: function() {
        // TODO: check, if we already have focus
//      this.tree.logDebug("dtnode.focus(): %o", this);
        this.makeVisible();
        try {
            $(this.span).find(">a").focus();
        } catch(e) { }
    },

This (">a").focus() should not be set for IE browser like the first issue fix.

If i change it to $(this.span).focus(), then it worked for all browsers without 
any issue.
As we are clicking on either of expander or checkbox icon, user might not want 
to focus on text which means setting focus on "a" should not be expected by all 
users of this grid. 

Please look into the second issue and provide us fix.

Original comment by pundir.f...@gmail.com on 2 Oct 2014 at 5:06