search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
530 stars 71 forks source link

Manual Sort: When tree is scrollable scrolling to bottom and then dragging any node results in the placeholder being in the wrong place, offset by the scroll distance. #91

Closed eoinomeara11 closed 2 years ago

eoinomeara11 commented 2 years ago

Manual Sort: When tree is scrollable scrolling to bottom of tree and then dragging any higher node results in the placeholder being in the wrong place, offset by the original scroll distance. Bug.

minop1205 commented 2 years ago

@eoinomeara11 Thanks for the report.

After checking, we found that some of the CSS in the sample was incorrect: the top: 0 was not mentioned in the style of the placeholder component, and the position: relative was not set on the parent element.

I have fixed sample code of placeholder. I have also created a sandbox for checking this fix here, so please check it out. https://codesandbox.io/s/issue91-xi1dl?file=/src/App.jsx

The fixed part is that

classes={{ root: styles.treeRoot
    root: styles.treeRoot,
    draggingSource: styles.draggingSource,
    placeholder: styles.placeholderContainer
}}

I added position: relative to the class styles.placeholderContainer above. And also added top: 0; to the class written in Placeholder.module.css.

Please check it out.

eoinomeara11 commented 2 years ago

Hi,

Many thanks for your help. The two changes you suggested have fixed my production code.

Regards, Eoin. On 6 Jan 2022, 3:59 AM +0000, minop1205 @.***>, wrote:

@eoinomeara11 Thanks for the report. After checking, we found that some of the CSS in the sample was incorrect: the top: 0 was not mentioned in the style of the placeholder component, and the position: relative was not set on the parent element. I have fixed sample code of placeholder. I have also created a sandbox for checking this fix here, so please check it out. https://codesandbox.io/s/issue91-xi1dl?file=/src/App.jsx The fixed part is that classes={{ root: styles.treeRoot root: styles.treeRoot, draggingSource: styles.draggingSource, placeholder: styles.placeholderContainer }}



I added `position: relative` to the class `styles.placeholderContainer` above.
And also added `top: 0;` to the class written in `Placeholder.module.css`.

Please check it out.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>