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.

[eoinomeara11]

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]

@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]

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: ***@***.***>