Recalculate offsetX when browser resize

[gurachan]

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 offset x still the same when resizing the window which makes horizontal scroll go over the void.

Expected behavior

recalculate the offset X on window resize

Reproduction of the problem

Go to this link https://swimlane.github.io/ngx-datatable/#horz-vert-scrolling now when you are in desktop mode.. then resize your window.. wait until you see the horizontal scroll.. scroll it horizontally it will go over because the offset X is same as the old one.. but if you refresh its fine but still on small window it will be fine.. my problem is when switching to big and small.. the value that scrollbar follows still thinks that offset X is same as the old one.

What is the motivation/use case for changing the behavior?

I dont know what the hell is this question xD Please tell us about your environment:

windows 10 visual studio code npm node

• Table version:

  latest

• Angular version:

  angular 8

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 3.6 es5 and 2015

[gurachan]

[gurachan]

going from big to small it will become like that unless u reload

[adavis26]

I found a work around for this! The only way to rebuild the DatatableComponent (as of now, recalculate will NOT work for me either) is to have an *ngIf on your ngx-datatable. You then need to have some sort of subscription to listen for when whatever data you are trying to load is actually loaded. So while data is not loading, your variable is false which hides the ngx datatable for the time being. Then once your data is all ready (columns and rows built for the table), then set this loading variable to true. Then, your table will be rebuilt. Ugh, yes quite the work around.

//global variable public isLoaded: Boolean = false;

<ngx-datatable *ngIf="isLoaded" [rows]="rows" [columns]="columns"></ngx-datatable>

Then, whenever your data does load in your data service, set the variable to true. If you are only returning local data, just set it to true when your rows and columns are done.

[Iuriy-Budnikov]

any updates?

[hnfattahi76]

I solved this issue. you can find the code below : .ngx-datatable .datatable-body-row > div { transform: translate3d(0, 0px, 0px) !important; }