ag-grid: Ag-grid does not calculate size-to-fit column widths properly when container has fractional width
I’m submitting a … (check one with “x”)
[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of ag-Grid'
[] support request => see 'Requesting Community Support'
Steps to Reproduce See the following stackblitz with reproduction instructions, demo of issue and possible solution: https://stackblitz.com/edit/angular-ivy-dwcfti?file=src%2Fapp%2Fapp.component.ts
Current behavior When the container of the grid has fractional units (ex. 500.93px), the size-to-fit does not properly calculate the widths of the columns causing the total width to be 1px bigger than it needs to be which produces an unnecessary horizontal scrollbar.
This only appears when the zoom level of the browser (or monitor scaling) is increased. Default scaling on some laptops we’ve come across are set to 150% width 1920x1080 resolution.
Relates to: https://github.com/ag-grid/ag-grid/issues/3319
Expected behavior No horizontal scrollbar should appear.
Other Notes
One might question ‘Why are fractional units even being used?’ - I have no idea. This is not something explicitly set in our codebase and seems to be the result of a third-party library calculating the widths based on percentage which leads to these odd fractional widths. The hardcoded fractional units in the demo above were only used to demonstrate the issue.
Speculating here but it appears as though, however AgGrid is calculating the width of the content area, it is not rounding up the container width which causes it to be 1px off thus producing the horizontal scroll. I think if the calculation uses the Math.ceil of the container width, this should fix the issue.
Please tell us about your environment: Windows 10, node 12.16.1, npm 6.14.3, Angular 10.1.4
-
ag-Grid version: 24.0.0
-
Browser: Chrome Version 85.0.4183.121 (Official Build) (64-bit)
-
Language: Typescript 4.0.3
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 3
- Comments: 17 (5 by maintainers)
Hi guys,
Seeing that this getting traction here, let us have a look at the provided stackblitz originally:
https://stackblitz.com/edit/angular-ivy-dwcfti?file=src%2Fapp%2Fapp.component.ts
We will update you as soon as possible!
@makinggoodsoftware
Just following up here. My team and I are just trying to determine what criteria meets the threshold for determining whether something is a bug in ag-grid or not. From our perspective, the issue here is that ag-grid is not calculating the width of the container properly which causes an unnecessary horizontal scrollbar to appear. The last comment in #3319 asked for a reproducible demo which I have provided above. We’re not asking for ag-grid’s assistance in troubleshooting our codebase but believe we have identified a bug where Ag-grid does not handle fractional container widths properly.
Alternatively, if we dedicate some time to finding the line of code that is missing the
Math.ceil, would you accept a PR for the fix? All we are talking about here is a 1px difference which leads us to believe there’s some calculation happening in the ag-grid codebase that is missingMath.ceil.Thank you for your time.
@Vortilion Thank you for voicing your issue. While I can empathize with your frustration and sentiments, I do feel we should continue to engage with the ag-grid development team in a constructive manner. I’m trying to determine what about my issue filed above caused it to be flagged. If the community knows what types of issues will and won’t be fixed, this will help save time for everyone. My team is willing to go about investigating a fix for this issue but only if we can get consensus from the ag-grid team.
@makinggoodsoftware Following up again on this issue. Just looking for some feedback from your team as to whether or not this will make it into the internal bug list or if this is something the community can submit a PR to fix.