ember-table
ember-table copied to clipboard
Resize cols to prevent bottom scrollbar when right scrollbar appears
When right scrollbar appears, resize columns a tiny bit to prevent bottom scrollbar from appearing. Only applies when user has "scrollbars always on" enabled in OS settings.
Before

(Edit: gif fixed)
After

Details
This PR has no effect unless scrollbars are set to "always on" in the user's OS settings.
Every time ensureWidthContraint() is called, we calculate the width of the right scrollbar by taking the difference between the overflow offsetWidth and clientWidth. If the difference is positive, the right scrollbar has just appeared. If negative, it has vanished.
When the scrollbar appears, we compare the total width of the columns with the width of the container. If the columns exceed the container by less than, or exactly, the width of the scrollbar, we conclude that the right scrollbar has just pushed the container into horizontal overflow. In this case, we scale the columns down by one scrollbar width using the table's specified fillMode, which prevents the bottom scroll bar from appearing.
We take the inverse action when the scrollbar vanishes. This ensures that repeatedly expanding and contracting rows does not result in a net change in column widths.
Tests
Not feasible. The results are dependent on OS-level scrollbar settings.
Pulled this back into draft. A few changes I'd like to make:
- This should be an optional mode, not the default
- Needs docs
- Doesn't work in Firefox