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

eddiefantasticeddiefantastic Posts: 7Questions: 3Answers: 0

Link to test case:

https://plantpeanuts.co.uk

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited June 2021

    Yep, I'm seeing that too, thanks for the link. We'll take a look and report back.

    Colin

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • eddiefantasticeddiefantastic Posts: 7Questions: 3Answers: 0

    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.

  • eddiefantasticeddiefantastic Posts: 7Questions: 3Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • kingp0ddkingp0dd Posts: 2Questions: 0Answers: 0

    I can confirm that this is also happening to my table with FixedColumn.
    Subscribing to this thread.

  • davide.molognidavide.mologni Posts: 2Questions: 1Answers: 0

    I'm having this same problem, tried with Firefox v89 but same problem there. Microsoft Edge seems working correctly

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • amit_queamit_que Posts: 8Questions: 2Answers: 0

    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

  • kingp0ddkingp0dd Posts: 2Questions: 0Answers: 0

    FixedColumns seems to have been fixed as well with that commit:

    http://live.datatables.net/zeguwoxi/1/edit

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    @amit_que - does my fix above help? You can get the nightly version with it here.

    @kingp0dd - thanks!

    Allan

  • amit_queamit_que Posts: 8Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    but these nightly builds doesn't has the dataTables.colResize.js

    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

  • amit_queamit_que Posts: 8Questions: 2Answers: 0

    Thanks @kthorngren will follow up with danniel regarding the same

  • tempusers1tempusers1 Posts: 1Questions: 0Answers: 0
    edited June 2021

    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

  • puffsterpuffster Posts: 61Questions: 22Answers: 0

    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!!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    @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

  • josefinjosefin Posts: 1Questions: 0Answers: 0

    @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 :)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Sorry, just to confirm, you are saying:

    • Nightly: Works
    • 1.10.25: Does not work
    • 1.10.19 Works

    Is that correct?

    But yes, I want to get the nightly tagged up and released in the next future - hopefully next week.

    Allan

Sign In or Register to comment.