-
-
Notifications
You must be signed in to change notification settings - Fork 94
Drop indicator broken if you style the tree #181
-
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
image
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
😕 1
Replies: 2 comments
-
I had the same problem with the custom renderItem function. specifying padding in the not outer most div li my problem.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.