Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resize cols to prevent bottom scrollbar when right scrollbar appears #883

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

ahmacleod
Copy link
Contributor

@ahmacleod ahmacleod commented Mar 18, 2021

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 ahmacleod force-pushed the alex.macleod.temp/re-fill-on-scrollbar-change branch from 4d56890 to 2422604 Compare March 19, 2021 17:52
@ahmacleod ahmacleod changed the title [WIP] Re-fill when scrollbar appears Resize cols to prevent bottom scrollbar when right scrollbar appears Mar 22, 2021
@ahmacleod ahmacleod marked this pull request as ready for review March 22, 2021 19:50
@ahmacleod ahmacleod requested review from a team and twokul March 22, 2021 19:56
@ahmacleod ahmacleod marked this pull request as draft April 19, 2021 22:33
@ahmacleod
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant