ScrollbarV causes white space to the right of the last column on grids in modal windows (less than 100% width)

[dstj]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior When the table has scrollbarV set. An horizontal scrollbar appears to scroll right to nothing but white-space when the ngx-datatable is shown in a modal windows that's less than 100% width, even if there more than enough space to display the data without scrolling.

Calling recalculate() on the grid does not solve the issue.

Expected behavior No scrollbar should appear if there's enough space for all columns.

Reproduction of the problem I have a plunkr reproduction of the problem here: https://plnkr.co/wm0NPZP7lgHIqaW3

What is the motivation / use case for changing the behavior? It's a big UI problem to have extra white space and an unnecessary scrollbar

Please tell us about your environment:

• Table version: 13.1.0

• Angular version: 6.1.7

• Browser: Chrome 68.0.3440.106 Edge 42.17134.1.0

• Possibly related issue: #1245

[ParadoxZero]

This issue is also present when resizing the browser window.

[nivsegal]

Any ways to fix this issue? Sometimes triggering the resize event helps, but sometimes it doesn't.

[dstj]

@nivsegal, the "workaround" I just found is to add a setTimeout() to display the grid after everything is shown.

Here's a link to an updated stackbliz demo as an example.

[L-X-T]

Thanks for the workaround tip @dstj

[slavede]

I see this PR came in https://github.com/swimlane/ngx-datatable/pull/1906. It would partially fix it, at least some scenario.

[ozturkmmurat]

@nivsegal Solution : datatable-scroller{ width:auto !important; }