Wrong width calculation

[MassimoScattarella]

Problem: Table is larger than container
Description: I use paginated table and scrollable container is more larger, columns are wide
Resolve my problem with downgrade ember-scrollable at 0.4.4
Correct or are there any other problems?

Edit: the problem is on ember-srollable 0.4.5

[alexander-alvarez]

@buschtoens any insights into this?
looking at alphasights/ember-scrollable@0.4.4...0.4.5 I think that's the only relevant change

[buschtoens]

Will take a look at this on Monday evening, hopefully.

[joshbuckley]

Also came across this issue in mac chrome (but not firefox) when "always show scrollbars" is enabled in system settings. The width returned by the scrollbar-thickness service was 15px and that threw off the width of the table body. In this case the width calculation isn't needed because the scrollbars are rendered on top of the table. Turning off "always show scrollbars" also resolved the issue.

[marceloandrader]

In one of our projects, we are also seeing this, with latest v 1.8.6 that installs scrollable 0.4.5 we see discrepancies between the widths of the header cells with the row cells. When I cloned ember-scrollable locally and linked in the project as 0.4.4 the problem goes away.

[MassimoScattarella]

Exactly, the problem si scrollable 0.4.5

[buschtoens]

Could y'all please post screenshots indicating the problem alongside some info on which browser and OS you're using? :)

I suspect that this problem only occurs on OS X.

[marceloandrader]

This screenshot is on Chrome 58.0.3029 on Linux with ember-scrollable v 0.4.4

This uses the same environment but with ember-scrollable v 0.4.5

The table headers are not aligned with the row cells.

[MassimoScattarella]

same problem on Windows

[buschtoens]

Thanks @marceloandrader!

Yes indeed, it's an upstream bug in ember-scrollable. And I'm the one to blame. 😅

Tracking it here: alphasights/ember-scrollable#76

[buschtoens]

So sorry for the long hold up, folks. I had a lot of things on my to do list. 🙈

I finally got around to fix this bug. It was caused by remnant ::scrollbar pseudo selectors that set the width of the scollbar to 0 in Chrome, but only inside of the emulator <div>.

I submitted a PR (alphasights/ember-scrollable#78) and as soon as it's merged, this is fixed. 🙌

[buschtoens]

ember-scrollable@0.4.7 was just released, fixing this! 😃

[RustyToms]

I was the only one on my team that ended up getting ember-scrollable 0.4.5, they all had 0.4.4 (which satisfies the package.json version requirements). They all thought I was crazy when I kept seeing this issue and nobody else did 😆 I started to think I was crazy too

[buschtoens]

Haha. I'm very sorry for making you question your sanity. 😅

Perfect time to recommend yarn. It's an npm client that assures everybody on the team and every build gets exactly the same versions of packages. It's also quite a bit faster than npm and resilient to network outages.

ember-cli is already natively supporting it as well.

[RustyToms]

Actually we are all using yarn, and keep our yarn versions updated. We have not always experienced that, especially not in this case. But this repo does not have a lockfile. We have a yarn.lock in our build, and it resolved ember-scrollable to 0.4.5, I have no idea why I was the only one who experienced the problem. yarn is still rather buggy?

[offirgolan]

@RustyToms you should be able to resolve your yarn issue with a simple yarn upgrade ember-light-table