Show indicator vertically when hovering over row container

[nikitakofman]

Hello, i'm trying to do this since I started building my web builder, i've tried many different ways , each time failed. So i'm coming to this community for help, hopefully someone figured this out, or maybe some feedback from @prevwong

The indicators are always horizontal - what i'm trying to do is to display them vertically if i'm hovering over row elements, the gif will explain better:

When I hover over the text on the left, the indicator appears at the top of the left column (this will drop it to the left of that column, it would make more sense to have a indicator vertial to the left of that column instead of on the top). Also, if I move my cursor downwards, the indicator shifts to the bottom of the right column, suggesting that the item will be dropped there. This is confusing because when my cursor is on the left side, it's unclear why the indicator would suggest a drop location on the right.

What I would like is to make the indicators appear vertically in between the elements , similar to this picture:

For more accurate representation, I would like it to be exactly like Webflow:

You see, the indicator is correctly in a vertical position because the element is row, and accurate to the mouse co-ordinates.

I briefly tried the dom mutation technique, maybe upon improving it it could work but I feel it's complicating things too much, there must be a simpler solution.

I've experimented with creating custom handlers and encountered the same issue present with the default Craft.js indicators: the indicator or placeholder doesn't accurately capture mouse coordinates for a row container. It appears to be an internal issue beyond my control. Even when the mouse is on the left side, the system internally predicts a drop on the right side, but the indicators fail to accurately reflect this.

Any help on this would be greatly appreciated, i've been on this problem for 2 months, can't figure it out.

Thanks in advance,
NK

[nikitakofman]

Ok so after playing around I have found the problem, I have made a "overflow" tool for my elements where I can set overflow to hidden or visible, I had it on Visible by default. That's what was keeping from the indicator to appear vertically, like in the demo site. So to make the indicators appear vertically, the elements you are dragging over have to be overflow hidden or it doesn't work. Maybe this can be fixed in future release - designing my elements overflow or hidden should not interfere with the indicators.