Page MenuHomePhabricator

Table changes width after tablesorter initialises
Closed, ResolvedPublic

Description

Our previous attempt to fix this was backed out when it was discovered the CSS selector did not match with what the JS did, so it broke complex tables (T195108).

We can still fix this for the majority of simpler tables, and avoid breaking complex tables by simply removing the CSS approximation once the JS has run.

Event Timeline

Esanders created this task.Mar 20 2019, 1:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 20 2019, 1:37 PM

Change 497769 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] TableSorter: Fix pre-JS selector to match wikitext-generated sortable tables

https://gerrit.wikimedia.org/r/497769

After the above patch here is the change in appearance for a simple sortable table, and @matmarex 's minimal failing test case from the previous attempt:

beforeafter

Well it now fails for tables with row-header cells…

{| class="wikitable sortable"
!class="unsortable"|
!A
!B
|-
!α
|4
|3
|-
!β
|2
|1
|}
before JSafter JS

I don't think there is a viable CSS solution for this problem. It can only be solved by implementing the tablesorter header cells algorithm in the PHP parser.

I think a solution that results in FOUC in <10% of cases is better than one that results in a FOUC in 100% of cases.

Esanders added a comment.EditedMar 24 2019, 12:38 AM

Amended the selector to be limited to the first row. This will remove the icon from the H1/H2 second row headers in the first example, causing a width change, but fixes the row-headers case which is probably more common.

Change 497769 merged by jenkins-bot:
[mediawiki/core@master] jquery.tablesorter: Fix pre-JS selector to match wikitext-generated sortable tables

https://gerrit.wikimedia.org/r/497769

matmarex closed this task as Resolved.May 23 2019, 3:20 PM
matmarex assigned this task to Esanders.