In my current project, I am utilizing Angular UI Grid. The grid automatically resizes itself so that all columns fit within a specific div horizontally.
While this feature works well initially, it becomes problematic when there are more rows than can fit on a single screen. A vertical scroll bar appears (which is good), but it covers part of the last column (which is bad). Even if horizontal scroll bars are enabled to access the last 20 pixels, the header cells do not scroll along with the data cells, resulting in misalignment.
It's puzzling because the grid was perfectly sized before the scroll bar appeared, indicating that there should be no need for horizontal scrolling. However, the way the scroll bar obscures the content in the rightmost 20 pixels necessitates its presence.
I am determined to find a solution to this issue and have explored several unsuccessful strategies:
- Attempted to detect the presence of a vertical scroll bar and add padding or margin strategically to adjust the content of both the header and data cells for proper alignment. However, identifying the container with or without a scroll bar proved to be challenging, and manually adding padding did not effectively resolve the issue.
- Explored ways to allow the container with the scroll bar to extend beyond the grid when necessary. Unfortunately, this approach encountered similar difficulties as the first one.
- Researched replacing the default scroll bar with a custom solution. While there are branches that offer this functionality with specific libraries, our project is bound to a specific commit of UI Grid, making the integration of new libraries a complex process.
Any insights or suggestions would be greatly appreciated.