Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:5

Top GitHub Comments

2reactions

dstjcommented, Oct 3, 2019

@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.

0reactions

slavedecommented, Jul 7, 2020

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

Top Results From Across the Web

scrollbar-width - CSS: Cascading Style Sheets - MDN Web Docs

The scrollbar-width property allows the author to set the maximum thickness of an element's scrollbars when they are shown.

How to put scroll bar only for modal-body? - Stack Overflow

modal -body in % and it will be a % of its parent so you if you set it less than 100% there...

How to prevent overflow scrolling in CSS - LogRocket Blog

In the image and code below, we will outline our root HTML file in red ... because the grid-gap value is added to...

Grid system - Bootstrap

container-fluid for width: 100% across all viewport and device sizes. Rows are wrappers for columns. Each column has horizontal padding (called a gutter)...

Kendo Angular Grid Column Width - Vela Cloud

Kendo Angular Grid Column Width- Resize grid columns so the last column does ... widths is greater than the available Grid width, a...