table resize fails on Android/Chrome when device rotates

mark1d

Hi Allan,

Thanks for your great Datatables product. We are using it thru a web app template (AdminLTE).

Our use case is: we are building a web admin to our medical device product. Administrators and care providers will log in to our system to administer care for their patients on our medical device (physical therapy machine). We want to enable them to access the system from tablets and mobile phones as well so we are enabling mobile responsive versions of the admin interface. It is when they access via Chrome on Android that I am seeing odd behavior. Specifically, if the device is rotated (portrait -> landscape or vice versa) that the table does not get updated correctly. The specific device I am using is a Samsung Galaxy Tab E.

I am using the Scroller and Responsive extensions. I used a data sample file from your site with 1000 entries to simulate a loaded table.

Issues:

1: the table header row column widths get out of sync with the data rows (they become different widths).

Steps:
Start with tablet in landscape
Reload the page.
Scroll the table so that the top row is ID #24.
Rotate the device to portrait.
Observe that the column widths are now out of sync.
Scroll the table down.
At some point, the table gets updated, and now columns are in sync again.

2: the table does not paint correctly after the tablet rotates when the top row is greater than 1. By paint correctly, I mean that the table does not fill the page. To restore painting, you must scroll the table, and it will eventually repaint fully.

Steps:
Starting with tablet in landscape
Reload the page
Scroll the table so that the top row is ID #15.
Rotate the device to portrait.
Observe that the bottom row is ID#27, yet there is room for several more rows.
Scroll the table down.
Eventually, the table repaints and fills the page with rows of data.

Regarding the screen size changing on rotate, I tried using your resizer plugin and was unsuccessful getting it to work in my design (would resize when page got longer but not when page got shorter). I found something on your blog or forum that did work better for my design (bootstrap-based). Although not ideal, it seems to handle the page size changing on device rotates better.

I attached the HTML sample and data file along with 2 screen captures - #1 is correct view and #2 demonstrates both problems.