| Issue 321: | Drag helper icons display offset is incorrect | |
| 10 people starred this issue and may be notified of changes. | Back to list |
What steps will reproduce the problem? 1. Insert a jQuery UI Tabs control 2. Offset the Tab's outer div from position 0,0 within the document 3. Place a dynaTree control inside a Tab 4. Drag a node Attached. Note that you will need jQuery Tabs. I have attached my theme roll for convenience (cuptertino.zip) What is the expected output? What do you see instead? Expect: Helper icons to display in the correct position Currently: Helper icons are displayed offset within the tabs area by the amount that the Tabs div is offset within the document (see attached Issue 3 Example.jpg) What version of the dynatree and jQuery are you using? $Version: 1.2.1_rc3$ $Revision: 585, 2012-01-10 00:07:39$ * jQuery JavaScript Library v1.7.1 On what operating system and browser? Chrome 19, Vista 64 What DOCTYPE declaration are you using? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Please provide any additional information below. This works fine in v1.2.0. I believe there are two things playing off against each other here 1. jQuery UI Tabs control uses position: relative for the outer div (jquery-ui-1.8.20.custom.css line 480. ) 2. Dynatree uses CSS left and top to position the helper icon(dynatree line 2584-2589): this.$dndMarker //.offset({left: pos.left, top: pos.top}) .css({ "left": pos.left, "top": pos.top, "z-index": 1000 }) The position: relative setting for the Tabs causes everything inside the Tab div, including the tree icons, to be positioned from the top left corner of the Tabs div instead of the top left corner of the document. So when using abosulte positioning via the css this causes the helper icons to be offset incorrectly. Turn position: relative off for the Tab div using Chrome dev tools the drag icons show correctly. Assuming that this is the actual issue I have found two possible solutions so far: 1. If you revert this back to using .offset({left: pos.left, top: pos.top}) instead of setting left and top in the css then the issue goes away. 2. If you change line 2557 from var pos = $target.offset(); to var pos = $target.position(); the issue goes away, however, this may have flow on effects when trying to drag between trees within different divs, not sure though as I haven't tried this scenario. This may be related to issue #303 . Thanks.
Jun 6, 2012
Deferred, so v1.2.1 can be released shortly.
Labels:
-Milestone-Release1.2.1 Milestone-Release1.2.2
Jun 12, 2012
Just a note that it appears this issue was introduced by the fix for issue 258 , so you'll want to make sure that 258 stays fixed when this gets fixed. Thanks.
Jul 13, 2012
Issue 327 has been merged into this issue.
Jul 13, 2012
Issue 302 has been merged into this issue.
Jul 13, 2012
Issue 172 has been merged into this issue.
Jul 25, 2012
Issue 327 has been merged into this issue.
Jul 25, 2012
(No comment was entered for this change.)
Owner:
wbgil...@gmail.com
Jul 25, 2012
Issue 303 has been merged into this issue.
Oct 3, 2012
Now the offset is incorrect when using dynatree without jQuery UI Tabs
Oct 3, 2012
did you try with the latest version from the repository (after 1.2.1)? If so, could you send a sample page taht reproduces the problem?
Owner:
---
Oct 3, 2012
Sorry my mistake. Bug appears with old versions of jQuery UI (tested with 1.7.2). With 1.8.17 everything works fine. |
Labels: Milestone-Release1.2.1