Grid Column alignment issue when x and y axis scroll bar is enabled in the grid.

1 Answer 741 Views
Grid
Karthikeyan
Top achievements
Rank 1
Iron
Karthikeyan asked on 30 Jul 2021, 07:55 AM

Hi Team,

We are using Grid control.

When grid is enabled with x-axis and y-axis scroll bar. if user try to move the x-axis scroll bar to the end (right side), then grid column alignment issue is raising. Please refer to the attached screenshot.

kindly suggest us any fix or workaround for this issue.

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Aug 2021, 09:14 AM

Hello, Karthikeyan,

We had a similar issue in the older version of the Grid which is already fixed.

Please ensure that the application is using the latest version of the components.

If it still occurs, please share an example reproducing it and I will be happy to take a look.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Raghavendra
Top achievements
Rank 1
commented on 05 Aug 2021, 07:09 PM

From same team,  We are using the latest version 4.8.0

Kindly suggest us how can we fix this issue

Stefan
Telerik team
commented on 06 Aug 2021, 05:33 AM

We have made different tests, and the columns were aligned all the time.

In order to see what could be causing this and suggest a solution, please share a runnable example reproducing the issue and I will be happy to inspect it.
Sai Kiran Reddy
Top achievements
Rank 1
commented on 25 Aug 2021, 04:39 PM

From same team, we have created a runnable project for this issue , please find the screenshots attached for your reference and attaching  the project as well.

Follow the below steps to run the application.

Step  1 : npm install

Step2 : npm start.

Note:  I have not attached any node_modules due to high size.

Stefan
Telerik team
commented on 26 Aug 2021, 01:48 PM

Hello,

Thank you for the example.

I noticed that the issue occurs because of this CSS style:

.k-grid-header{
  margin-left: -25px !important;
}
Removing it resolved the issue.

This is expected as this style moves the header with 25px on the left and causes a misalignment.
Sai Kiran Reddy
Top achievements
Rank 1
commented on 10 Sep 2021, 02:05 PM

Hi Team,

When we are using the kendo grid in our project , we are getting a white space on the right side while zooming out below 100%, please find the screenshot attached and a sample of project for your reference.

https://fkekiv--run.stackblitz.io/

Stefan
Telerik team
commented on 13 Sep 2021, 10:08 AM

This is a known issue when zooming and it can be monitored here: 

https://github.com/telerik/kendo-react/issues/904

I added this reported to the issue as well.

Tags
Grid
Asked by
Karthikeyan
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Share this question
or