Hi,
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?
Thank you.
Hello,
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.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Hello Teodosia,
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.
Thanks
I have modified the previous sample according to the provided steps and set the overflow of the body in the style.scss file to auto. I tested the sample in Chrome and Firefox and on my side it seems to work as expected.
Here could be found the modified sample.
Please test it on your side and let me know how it behaves.
Hello Jens,
I am glad that you managed to achieve your requirement with Teodosia`s help.
Thank you for using Infragistics components!
thank you for your support. I checked out your changes in the test application. Then I modified my css. The result of my first tests looked good. I will watching the behaviour of the column box in the next future and will report.
The trick was the body css
body { height: 100% !important; overflow: auto !important; margin: 0 !important;}
Thank you again.