Latest Google chrome (91.0.4472.77) breaks fixed columns with complex headings
Latest Google chrome (91.0.4472.77) breaks fixed columns with complex headings
eddiefantastic
Posts: 7Questions: 3Answers: 0
Link to test case:
Description of problem:
Look at the lower table on that page. Works fine on Firefox & Edge and was fine on Chrome till the latest update. But now chrome really messes up the column widths making the table unviewable since the header row no longer matches the table rows.
If I remove the complex header then it all works as it should but unfortunately the extra header row needs to be there in order for the data to make sense.
Any help appreciated, thanks.
Answers
Yep, I'm seeing that too, thanks for the link. We'll take a look and report back.
Colin
This is going to be a difficult one! The Blink team have been working on their TablesNG (Next Generation) rendering and 91 has a load of commits on it and is now enabled.
It looks like there are some issues with it still unfortunately. I'm not sure which one it is that is causing this issue specifically. I'd also like to try with Chrome canary to see if it has been fixed already, but they don't do nightly builds for Linux. I'll try on a Windows machine later on.
Allan
Thanks for looking. I've now discovered it has nothing to do with the fixed columns. Here is the same table without fixed column to display the same issue.
https://plantpeanuts.co.uk/index_test1.php
I've found a workaround (my original link is now looking fine again). If I filled the top left empty cell with about 50 's it padded the cell out to make it wide enough to match the others.
I've created an example here, trying to rule out other factors...
http://live.datatables.net/lulemiyi/1/edit
If I remove the nowrap class from the css it then works fine. It's like the top header is not respecting the fact that the cells beneath it are not wrapped. The tfoot is fine though.
The way DataTables' scrolling works is to split the header and body into two different tables. That way we can scroll the body and leave the header in place (similar to what position:sticky can do now). Since we have two separate tables we use Javascript to align the columns. It looks like Chrome 91 isn't obeying our width assignment for complex headers.
Allan
I can confirm that this is also happening to my table with FixedColumn.
Subscribing to this thread.
I'm having this same problem, tried with Firefox v89 but same problem there. Microsoft Edge seems working correctly
That's interesting - we aren't seeing that in Firefox 89. Chrome 91 however... Unfortunately, it also seems to effect Chrome Canary on Windows. We are going to have to dig deeper.
Allan
I've just made a commit that helps to address this. It isn't perfect yet, but it is massively better than it was: http://live.datatables.net/lulemiyi/21/edit .
I haven't looked at the FixedColumns aspect yet and if that will need some changes as well.
Allan
I am facing columnWidth risizing issue whenever i try to maximize the column only the header is maximizing horizontally but the below header column size are remaining as it is
This has caused after the latest chrome 91 update
FixedColumns seems to have been fixed as well with that commit:
http://live.datatables.net/zeguwoxi/1/edit
@amit_que - does my fix above help? You can get the nightly version with it here.
@kingp0dd - thanks!
Allan
hey @allan thanks for your response but these nightly builds doesn't has the dataTables.colResize.js i think this is causing the resize of column issue
This is developed by a third party, see this thread. You can contact the developer to see if they have any updates or are willing to make updates.
Kevin
Thanks @kthorngren will follow up with danniel regarding the same
Just a FYI, this issue is affecting a lot of users in addition to datatables users. I made a repo (vue and bootstrap) showing how i resolved the issue and how to reproduce the old and new behavior. It may help https://stackoverflow.com/questions/67977643/chrome-91-update-broke-all-table-views
To follow up on this, I'm having the same exact issue and the StackOverflow post that @tempusers1 supplied fixed the issue -- if I go to chrome://flags/, search for TableNG and disable it, everything aligns up beautifully again.
Allan, I know you had a fix that you thought was helping some, is there a more permanent fix coming our way? I know you are crazy busy and sorry to ask!!
@puffster - Have you tried the nightly version? It appears to address the issue and if we can get enough feedback confirming that, I'll tag it up and release it soon.
Allan
@allan I tried the nightly build using the cdn version I had (1.10.19) and it works. The latest stable version (1.10.25) doesn't seem to work. So I would appreciate if you're able to push the nightly version soon
Sorry, just to confirm, you are saying:
Is that correct?
But yes, I want to get the nightly tagged up and released in the next future - hopefully next week.
Allan