ag-grid: Pinning columns right: Header does not align with content when scrolling

I encountered the following layout problem in Chrome and Edge, when pinning one or more columns to the right:


As you can see the header is not aligned with the content, since the scrollbar in the content section moves its columns to the left.

This problem occures when you have columns pinned to the right and scrollbars in the grid. Since the grid header doesn’t have scrollbars, but the content does, it’s missing a margin-right of about 18px (depends on the browsers scroll bar size) to be aligned with the content.

This can be quick fixed by adding the following css rule and replacing [scrollbarWidth] with the correct or estimated value.

.ag-pinned-right-header { margin-right: [scrollbarWidth]px }

Since this seems to be a bug, I wanted to let you know. I do hope this can be fixed in upcoming versions.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 17 (4 by maintainers)

Most upvoted comments

i’ve pushed it up on my list of items, should get to it soon.

Thank you for your answer, i will try the downgrade then (yes it hurts not being able to upgrade to newer versions of angular but you know, company stuff…)

Thanks for bringing this up. There was a regression in one of the versions and this has been fixed in our latest release V31. Please upgrade to latest for the fix.

Kind regards, Zoheil

Having the same issue with ag-grid version 30.2.0.

this is now fixed. will be in next release (we plan on mid next week).