👎Horizontal Scrollbar

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;
}

[julmot]

not stale.

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