Table width includes scrollbar

[frykten]

Hi!

We've got a use-case where we need to scroll inside the table to see all the rows---the overflow is then on the .ember-table component. The issue seems to be with the size of the table tag: in utils/element.js/ getInnerClientRect(), the JS method element.getBoundingClientRect() is used which is useful to find the boundaries of the element but not its client size since it counts the scrollbar as part of the width of the element...

It results as the last column being 'stomped on' by the vertical-scrollbar (in red in the picture below) and therefore the width of the table tag is now too wide for its overflow: auto parent and we get a horizontal-scrollbar (in green in the picture below):

In this picture, we can see that the table (highlighted in blue by the browser in the picture below) is its offset parent width, goes under the vertical scrollbar (in yellow in the picture below) and therefore the vertical scrollbar (in red in the picture below):

What we aim to achieve, a vertical scrollbar (in red in the picture below) that resides outside the table and normal flow (no horizontal overflow, in green):

We need to recalculate when the table is populated: depending on the number of rows, we may or may not need to overflow and can't have a blank space.

[ctjhoa]

Seems to be fixed in v3.x

[kpfefferle]

We added a containerWidthAdjustment option to thead in #637 specifically to address this usage and account for custom scrollbar widths. Can you give that a try?

[mixonic]

Based on merging #763 and the report that this is correct in 3.x, I'm going to close this issue.

Please let me know if I'm missing anything!