ember-table icon indicating copy to clipboard operation
ember-table copied to clipboard

Resize cols to prevent bottom scrollbar when right scrollbar appears

Open ahmacleod opened this issue 4 years ago • 1 comments

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

20210324 Ember Table Scrollbar Before Improved

(Edit: gif fixed)

After

20210322 Ember Table Scrollbar 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.

ahmacleod avatar Mar 18 '21 22:03 ahmacleod

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

ahmacleod avatar Apr 20 '21 19:04 ahmacleod