Ngx-datatable: 👎Horizontal Scrollbar

[elvisbegovic]

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

Current behavior
I don't understand why when I resize my table add big scrollbar horizontal. Here you can see gif...
I tried to recalculate() table whe resizing this event is fired but nothing change to my table:

@HostListener('window:resize')
  onResize() {
    this.table.recalculate()
  }

Expected behavior
I need my DOCUMENT column to have whole space in the middle and when resize stop at [minWidht] PS:status column need to be as in GIF at the end like my GIF, this is OK

Reproduction of the problem

GIF

CODE

<ngx-datatable
      #myTable
      class='material expandable'
      [columnMode]="'force'"
      [rowHeight]="50"
      [scrollbarV]="50"
      [rows]='rows'
      (page)="onPage($event)">
      <!-- Row Detail Template -->
      <ngx-datatable-row-detail ....>

      <!-- Column Templates -->
      <ngx-datatable-column
                            [width]="70"
                            [resizeable]="false"
                            [sortable]="false"
                            [draggable]="false"
                            [canAutoResize]="false">...</ngx-datatable-column>

      <ngx-datatable-column name="Document (QrCode)"
                            [resizeable]="false"
                            [sortable]="false"
                            [draggable]="false"
                            [minWidth]="300" >...</ngx-datatable-column>
      <ngx-datatable-column name="Status"
                            [width]="90"
                            [resizeable]="false"
                            [sortable]="false"
                            [draggable]="false"
                            [canAutoResize]="false">...</ngx-datatable-column>
    </ngx-datatable>

What is the motivation / use case for changing the behavior?
only when resize because when I refresh page my resize are correct ! not when onResize

• Table version:
  "^5.0.0"

• Angular version: 2.0.x
  2.4.4

• Browser:
  chrome (last) and firefoy (last)

• Language:
  TypeScript

PS: Potential solution:

I juste checked width of <datatable-scroller> never changed when resize, so when I arrive on my page the width is correct but when resize window: width of this component is never updated. So I tried to ovveride this css to width:100% and it works, any idea?:

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

[Thoma5]

Had the same issue, and your workaround seems to work!
Thank you

[amcdnl]

Side note: That will only work if you don't have horz scrolling at all. Can you make a plunkr demo? So ideas it could be:

• Scrollbar width calc? See: https://github.com/swimlane/ngx-datatable/blob/master/src/utils/scrollbar-width.ts
• Column width calc - https://github.com/swimlane/ngx-datatable/blob/master/src/utils/column.ts#L46
• Width distribution calc - https://github.com/swimlane/ngx-datatable/blob/master/src/utils/math.ts#L100

[saithis]

I think the problem is with the [scrollWidth]="columnGroupWidths.total" input of datatable-scroller. columnGroupWidths.total gets set when the columns of datatable-body are set, but isn't recalculated when calling this.table.recalculate().

[saithis]

@amcdnl I noticed, that it mostly happens for us when the app is initially loaded and I think it has something to do with the browser scrollbar. Something like this:

1. App gets loaded with a empty datatable (because the data is loaded from the server). The page is shorter than the browser height.
2. Data arrives and when setting the collumns, columnGroupWidths.total is calculated.
3. Angular renders the rows, which makes the page longer than the browser height -> browser shows a scrollbar, which decreases the page/datatable width -> columnGroupWidths.total is now wrong and datatable-scroller shows a scrollbar.

It also happens with a left sidebar, which has a css transition on the width to scroll in from the side. I tried to fix that by calling this.table.recalculate() after the transition ends, but as described in my previous comment, this doesn't recalculate columnGroupWidths.total.

[pirquessa]

I also have this useless scrollbar event when my content fit the size of the container. I also had to use the workaround:

.datatable-scroll { width: 100% !important; }

[saithis]

@amcdnl Here is a plunkr demo: http://plnkr.co/edit/rE92NBDkqxzComDLnaj6?p=info
On hover the datatable has a transition on width which makes it smaller. Also there is a transitionEnd event listener which calls recalculate() on the datatable, but has no effect. I would expect recalculate() to adjust the datatable to the new width.

To make it better visible, I added a border and overflow visible to ngx-datatable and a background-color to datatable-scroller.

[VoodbooV]

this issue sucks, it is driving me mad

[tiagochi]

Guys, I found a workaround. It´s not pretty, but works.
The problem is that resizing the window makes the datable recalculate and then the datatable-scroll gets smaler then the datatable-row.
The idea to fix is when resizing the screen we copy the size of the row to the scroll. I had to use a setTimeout because the resizing of the row occurs after the resize of the window event.

Add this:

@ViewChild('datatable') datatable: DatatableComponent;

@HostListener('window:resize')
onResize() {
if (this.datatable) {
setTimeout(() => {
this.datatable.element.querySelector('.datatable-scroll').setAttribute('style', 'width:' + this.datatable.element.querySelector('.datatable-body-row').clientWidth + 'px');
}, 10);
}
}
}

[LeanderCoevoet]

+1

[hernanBeiza]

I had this issue inside a ng-modal, so I got the instance of my component on ngAfterViewInit and set the width using the element property:

import { DatatableComponent } from '**@swimlane/ngx-datatable';**
@ViewChild(DatatableComponent, { static: false }) dataTable: DatatableComponent

ngAfterViewInit() {
  //In this case I need the component instance for edit the with style inside a ngmodal issue 
  this.dataTable.element.querySelector('.datatable-scroll').setAttribute('style', 'width:100%');
}

Thanks tiagochi

[NiPfi]

I was having the same issue. Bizarrely it didn't occur the same way over all browsers, for example Chrome in the mobile view didn't display the misbehavior. In any case, I was able to fix it by doing exactly what some workarounds here suggest; I added the following to the stylesheet for the affected component:

.datatable-scroll{
  width:100% !important;
}

[joeveiga]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[julmot]

not stale.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[julmot]

not stale.