Issue 373: DnD node.span incorrect in IE8
Status:  Fixed
Owner: ----
Closed:  Oct 2013
Reported by comi...@gmail.com, Nov 6, 2012
Within the _onDragEvent in the Over case the nodeOfs, relPos and relPos2 are derived from the node.span. For some reason the position of the span returns incorrect coordinates and a height and width of 0 in IE8 (may be related to some other parent DOM elements).

Changing the code to use the node.li for position works in both IE and FF. The code below was changed from: 
				var nodeOfs = nodeTag.offset();
//				var relPos = { x: event.clientX - nodeOfs.left,
//							y: event.clientY - nodeOfs.top };
//				nodeOfs.top += this.parentTop;
//				nodeOfs.left += this.parentLeft;
				var relPos = { x: event.pageX - nodeOfs.left,
							   y: event.pageY - nodeOfs.top };
				var relPos2 = { x: relPos.x / nodeTag.width(),
								y: relPos.y / nodeTag.height() };

Changed to:

                var liTag = $(node.li);
                var nodeOfs = liTag.offset();

                var relPos = { x: event.pageX - nodeOfs.left,
							   y: event.pageY - nodeOfs.top };
                    
                var relPos2 = { x: relPos.x / liTag.width(),
								y: relPos.y / liTag.height() };

Also changed the position of the marker in _setDndStatus to use the LI for position as below:

this.$dndMarker
				.show()
				.position({
					my: "left top",
					at: "left top",
					of: $(targetNode.li),//$target, //Use parent LI for position as SPAN returns incorrect coordinates
					offset: markerOffset
				});
Nov 7, 2012
Project Member #1 moo...@wwwendt.de
I will look into it, but i need a sample that reproduces the issue.
(jsfiddle or html file). Can you create one?
Status: Waiting
Labels: Milestone-Release1.2.3
Nov 13, 2012
#2 comi...@gmail.com
The problem occurs when the tree is used in our internal contract management system. The DOM hierarchy is very complex and the tree resides in an Infragistic splitter which I know renders with visibility:hidden initially and then changes the DOM on pageLoad (Ajax event). Researching the problem there are reports that it may be related to relative positioning or floats in the parent DOM in elements IE.
I've not been able to replicate this issue in a simple html file. For the purpose of the position the LI is located at the same offset at the SPAN and resolves the DND issue in our case.

Nov 27, 2012
#3 rdob...@gmail.com
This is simply a CSS issue in IE and does not require a JS change.

To fix it in IE "display:inline-block" needs to be added, and do prevent that change from causing spacing problems in firefox "vertical-align: top" also need to be added, like so:

span.dynatree-node
{
	display: -moz-inline-box; /*  issue 133 , 165, 172, 192,  */
	display: inline-block;
	vertical-align: top;
}

Nov 29, 2012
#4 comi...@gmail.com
Thank you. This resolved the issue in our case.
Jan 25, 2013
Project Member #5 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Feb 10, 2013
Project Member #6 moo...@wwwendt.de
(No comment was entered for this change.)
Labels: -Milestone-Release1.2.3 Milestone-Release1.2.4
Feb 12, 2013
Project Member #7 moo...@wwwendt.de
1.2.4 was a hotfix
Labels: -Milestone-Release1.2.4 Milestone-Release1.2.5
Sep 8, 2013
Project Member #8 moo...@wwwendt.de
This issue was closed by revision r679.
Status: Fixed
Sep 8, 2013
Project Member #9 moo...@wwwendt.de
(works on Safari) Needs testing in other browsers
Status: Waiting
Oct 6, 2013
Project Member #10 moo...@wwwendt.de
Assume fixed
Status: Fixed