Header is offset compared to data when a scrollbar is shown

Hello!


When using the ejs-grid component, I am running into issues when scrolling through the presented data. The headers gets desynced from the presented data creating a very visible offset. I have provided some screenshots with proper naming to showcase the issue.

A normal table where all data is visible without the need for scrolling, creates an offset:

A table with overflowing data and extra styling, introducing the need for horizontal-scrolling, not scrolled to the end. This is fine:

A table with overflowing data and extra styling, introducing the need for horizontal-scrolling, scrolled to the end. This causes an offset:

This issues happens on grids where scrolling is not needed and all data can be presented at once, but also in grids where scrolling is necessary to see all available data. After some small testing, I have noticed it happens more often when the entire grid is resized, for example when a mobile device switches orientation or the browser is rescaled. I am fairly certain it has something to do with the scrollbars. Is this a known issue and can this be fixed?


Thanks in advance,

Elias.


1 Reply

DM Dineshnarasimman Muthu Syncfusion Team August 18, 2023 12:16 PM UTC

Hi Elias De Herdt,


Greetings from Syncfusion support.


 After reviewing your query, we understand that you are facing issue in column header and data offset while scrolling is performed. We tried to replicate the issue based on the information you have provided but unfortunately, we cannot replicate the issue you are facing. The sample have been attached for your reference.


Sample: https://stackblitz.com/edit/angular-5vaabk-88chf6


However, we understand that you are facing this issue while using ng-template in column. Can you please provide the following information which will be very helpful for us to provide quick and better solution.


  • Can you please provide a runnable sample in which the issue replicates, which will be helpful to resolve the issue.
  • If possible, can you please replicate the issue in the sample which we have provided.
  • Video demonstration of the issue you are facing, which will be very helpful to us to understand your requirement.
  • Can you please provide us with the version of the Syncfusion Package you are currently using. This information will help us ensure compatibility and provide the most relevant guidance.


Regards,

Dineshnarasimman


Loader.
Up arrow icon