Drop indicator broken if you style the tree

[antonioggeorgiev]

Hello, I am using the ControlledTreeEnvironment element in a React project. I have two trees one next to the other and I have added drag-and-drop functionality between them. I wanted to style the tree but whenever I add padding or line height, the indicator of where I can move/drop items breaks. The ControlledTreeEnvironment renders its own item with renderTreeContainer, renderItemsContainer, and renderItem

In this photo, I want to drop it on "javascript-electron-endurosat..." element but it actually refers to a completely different element (the styling that breaks this is padding: .3rem 0).
Can you help me with this?

[kocyigityunus]

I had the same problem with the custom renderItem function. specifying padding in the not outer most div li my problem.

[Larsschoen]

I also run into this issue. I just wanted to have some spacing between the list items.

My solution is something like this:

 <li>
    <div style={{ minHeight: 23 }} > ... </div>
 </li>

Setting the min-height is important because the position of the drop indicator is calculated by the item height.
I had to set minimum heigh (and not just a fixed height), because expanding the item then stopped working.

Padding/Margin on ANY element was not working at all for me.