we are using the group by feature for columns in data grid. Usualy when we drag one column to the dop zone, we see the corresponding column box near the mouse position. But in some situation we see the box far below. In the picture the red rectangel under the table. The function works, if you only notice the mouse pointer.
We are using a lot of other package in the angular project. So we think, this could be a css problem.
Is there any solution? Can we override css with important flag?
I have been looking into your question and created a small sample trying to reproduce the described behavior. However, on my side, everything works as expected, so it is extremely possible, as you mentioned, the issue to be caused by other packages and your CSS. Here could be found my sample for your reference. Having in mind that on my side, it works as expected please feel free to modify it so that it replicates the issue and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own isolated sample. Remove any external dependencies and code that is not directly related to the issue, zip your application, and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Associate Software Developer
thank you for the example. I search for a reproduce sample. It is not the same situation in my own sample but see yorself.
Please follow these steps: Enable overflow css for the example and put some content under the table. Then scroll down to a position, where the drop zone is invisible. Then drag a column. The corresponding column box is far away from the mouse pointer.