search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Incorrect scroller width #1852

Open Spiceman666 opened 4 years ago

Spiceman666 commented 4 years ago

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I have a table with column mode 'force' and horizontal scrolling. If the initial width of the table is greater than the width of all columns, there is no horizontal scrolling. But if you start reducing the width of the table, the scroll appears immediately. This causes an empty space to appear to the right of the columns. Expected behavior Before the horizontal scroll appears, the column width must decrease (to the value of the 'width' or 'minWidth' property, or the default value of 150). Columns must fill the entire width of the table. Reproduction of the problem https://stackblitz.com/edit/angular-eujbw7

You can also see the bug in the official fullscreen demo page: http://swimlane.github.io/ngx-datatable/#full-screen If you have a small screen size, zoom out in the browser and refresh the page. There should not be a horizontal scroll. Then reduce the window width. You can see the empty space to the right of the columns.

What is the motivation / use case for changing the behavior? Columns must fill the entire width of the table.

How to fix: In DataTableBodyComponent, change the calculation of the scroll width. Currently, the width is calculated based on the value' width' of the column, and should be calculated based on the value'$$oldWidth'. It's wrong: [scrollWidth]="columnGroupWidths?.total"

Workaround: @ViewChild('table', {static: true}) table: DatatableComponent; ngAfterViewInit(){ this.table.bodyComponent.scroller.scrollWidth = 0; }

Please tell us about your environment: OS: Windows Package manager: NPM

VoigtK commented 4 years ago

This bug annoys me quite a while now. To reproduce it in the fullscreen example, all i need to do, is to open it on fullsize and reduce the browser width. Afterwards i can scroll into empty space on the right.

Your proposed workaround in ngAfterViewInit didn't work for me though. Got an exception: bodyComponent is 'undefined'

I used a HostListener until this gets fixed

@HostListener('window:resize', ['$event'])  
onResize(event) {
  // Workaround ngx-datatable #1852
  this.table.bodyComponent.scroller.scrollWidth = 0;
}
Staindk commented 3 years ago

I had this same issue when trying to make a table work right on smaller screens. It was driving me mad, and I implemented the fixes mentioned here, but they weren't ideal.

Googled once more and came across this https://github.com/swimlane/ngx-datatable/issues/455#issue-202812098.

Try the following for a CSS fix (worked for me, but does not seem to work in the OP's demo):

datatable-scroller {
  width: 100% !important;
}

EDIT:

I forgot to remove view encapsulation in the demo, so my CSS changes weren't taking affect.

See here for a fixed fork of OP's demo - though it's possible I'm missing some facet of this problem.

julkue commented 3 years ago

Same problem here, very annoying!