1. Home
  2. Forum
  3. Angular - EJ 2
  4. In the Edge browser, moving the scroll bar of the grid by mouse drag and drop does not work.

In the Edge browser, moving the scroll bar of the grid by mouse drag and drop does not work.

It works very well in Chrome, but in the Edge browser, if you set the resolution to 100% or more and click and drag the scroll bar, the scroll bar does not move. I've made a lot of grids, and certain grids work fine, but when I zoom in the resolution to 250%-300%, the same scrollbar doesn't move.


angular/core : 14.1.0

syncfusion/ej2-angular-grids : 19.4.56


5 Replies
SI Santhosh Iruthayaraj Syncfusion Team July 5, 2023 12:39 PM UTC

Hi


We have conducted research on the issue and discovered that it is directly related to Microsoft Edge browser itself. Fortunately, we have found a solution recommended on a Microsoft forum that should resolve the problem you are experiencing. To resolve the issue, you will need to disable Threaded scrolling. Below is a screenshot for reference:


You can access the Microsoft forum addressing similar issue through the following link:


Microsoft forum: Scrolling issues in Microsoft Edge - Microsoft Community


Please feel free to reach out if you have any additional questions or concerns.


Regards,

Santhosh I


?? ??? July 6, 2023 01:24 AM UTC

Thank you very much for your hard work. Thank you so much for letting me know. 


In addition, is there any way to solve this problem through grid settings? Or in the angular configuration.


SI Santhosh Iruthayaraj Syncfusion Team July 6, 2023 10:07 AM UTC

We have investigated the “Edge Browser Grid Scrollbar can’t be dragged using mouse” issue further at our end and found the root cause of the issue. It appears that this issue arises when the background-color property is set for scrollable elements. To demonstrate this, we were able to replicate the issue using only HTML div elements. You can access the sample we created through the following link:


Issue Sample: Edge Browser Scrollbar Issue - StackBlitz


In the provided sample, you will notice that the parent element has the overflow property set, and the content element has a background-color of #fff. As a result, the content element's scrollbar becomes unresponsive to mouse dragging. Please note that to reproduce the issue in the provided sample, you will need to set the screen scale as 125% or below in the System Display Settings.


Since this issue is specific to the Microsoft Edge browser, we have taken the created a ticket to Microsoft to address this issue. You can find the ticket and stay updated on its progress through the following link:


Ticket: Scrolling Issue in Edge Browser with Scale and Layout Settings at 100% and 125% - Microsoft Q&A


Rest assured, we will keep you informed once Microsoft provides a solution for this particular issue.


Thank you for your patience and understanding. We appreciate your cooperation throughout this process.


?? ??? July 7, 2023 01:26 AM UTC

Thank you again for your sincere reply. 


In our Angular application,

 we confirmed that it worked by adding the 

".e-grid .e-content {background-color: transparent;}"

property in the "style.css" file.


SG Suganya Gopinath Syncfusion Team July 10, 2023 12:58 PM UTC

We are glad that the issue resolved. Please get back to us for further assistance. 



Loader.
Up arrow icon