Page MenuHomePhabricator

Table Sorting with Class "sortable" hides sorting arrows if style background:$color; stands in column header
Closed, DuplicatePublic

Description

If the style attributes contain "background:$color" the column lose the sorting arrows (example A), but is still sortable

the syntax works correctly if "background-color" is used. (example B)

in wikitext the additional attributes of "background" are disabled (bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment) so "background" is a short variant of "background-color"

btw the deprecated bgcolor attribute works as expected. (example C)

In cases of "sortable" extends "wikitable" the issue is the same.

Link to examples: Benutzer:Boshomi/T156585

{| class= "sortable"
|+ |
;example A: class= "sortable" style="background:#ABC" in Col A (fail, Col A <s>is not sortable<s> is sortable, but the arrows are hidden.)
|-
! style="background:#ABC;"| Col A 
! Col B
|-
| A1 
| B1
|-
| A2
| B2
|}

{| class= "sortable"
|+ |
;example B: class= "sortable" style="background-color:#ABC" in Col B (ok)
|-
! Col A 
! style="background-color:#ABC;"|Col B
|-
| A1 
| B1
|-
| A2
| B2
|}

{| class= "sortable"
|+ |
;example C: class= "sortable" bgcolor="#ABC" in Col B  (ok, but deprecated )
|-
! Col A 
! bgcolor="#ABC" |Col B
|-
| A1 
| B1
|-
| A2
| B2
|}

Event Timeline

Boshomi renamed this task from Table Sorting with Class "sortable" not works with style background:$color; in column header to Table Sorting with Class "sortable" hides sorting arrows if style background:$color; stands in column header .Jan 29 2017, 8:33 PM
Boshomi updated the task description. (Show Details)

Yes this is a known issue (from the start of switching to this implementation of the sorter). The work around is: "Don't do that" or specify background-color: instead of background.

bgcolor works because background-color works. There are no plans to fix this problem at this point in time, but anyone is welcome to make a solution that works better (maybe using :after pseudo selectors or something ? ).

example A result in

<th style="background:#ABC;">Col A</th>

while example B result in

<th style="background-color:#ABC;" class="headerSort">Col B</th>

in case of junk like this:

style="background:#ABC url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Fenix_highresulution.svg/20px-Fenix_highresulution.svg.png') no-repeat right top;"

it would result into

<th class="headerSort">Col B</th>

backgound-attribute get lost completly

simple solution:

split background into its atoms, yield background-color (and other background-attributes if the are useful) and put the usefull atoms into resulting html. (I think there is only bgcolor useful, but mediawiki has a wide spread usage, so I'm not sure)