Last modified: 2014-11-02 00:12:43 UTC
Split off from bug 31755 Zlight would like that the tableheader indicators are on a seperate line from the table header. To quote: I hope that the sorting icon is put above the header name so that tables with many columns have more room for the header text. *http://en.wikipedia.org/wiki/List_of_countries_by_income_equality The sorting icon really needs to be above the text in a header cell. This allows for more columns to fit within the width of the screen. It also allows more space for the text within the header cells, since no space is taken up by the sorting icon. This is useful for tables with many columns. For example; see *http://en.wikipedia.org/wiki/List_of_countries_by_intentional_homicide_rate Go to that page and make your browser window more narrow (the middle button of the 3 buttons at the top of the browser window). Drag the right side of the window to get various window widths. Scroll down the page. Note that when the sorting icon is to the right of the text that the sorting icon does not wrap. So the table then requires a horizontal scrolling bar sooner than the tables with the sorting icons above the headers. Also, note the tables in the "Country subdivisions" section of that page. The tables start off closed. I can not put the sorting icons above the text. If I do then the column header text is not readable. The text would be readable if the default position of the sorting icon was above the text. Right now there is no way I can fix this problem.
I changed my user name here from Zlight to Timeshifter (name on Wikipedia). See [[Help:Sorting]], and the section called "Adding a separate rank column (1,2,3) next to a table". Many tables are wide enough to cover the whole screen on many monitors, notebooks, and tablets. It is not possible on those tables to add a separate rank column because of this. One can narrow the headers with breaks in the titles: <br>. Then one can make the number of rows in the header in the separate table with the rank column match the number or rows in the headers of the main table. Putting the sort button above the header title helps narrow the table some more. Every little bit helps. Otherwise, some smaller screen widths will constrict the table enough to force the creation of more lines in the header row. This breaks the alignment of rows between the 2 tables. Of course, in this case, what is really needed is a static rank column (or row numbering) that is integral to the main table (not in a separate table). I will file a bug report requesting that feature.
Concerning my last comment. See bug 40634 - Table option for static rank order column, or row numbering. Back to this discussion. This discussion was split off from bug 31755. There I changed my mind and said that the sort button needed placement options, and not a default position above the text as I first suggested. Maybe something like sort-button=top, sort-button=right, sort-button=bottom, sort-button=left. It could be placed at the top of the table wikitext: {| class="wikitable sortable" sort-button="top"
I recommend having the button below the text in these cases instead of above. The text data should be more prominent than the interaction button, and it should also make clear that the header itself is not among those parts that will be sorted. The relevant file that needs changing is resources / jquery / jquery.tablesorter.css . If Timeshifter's proposed syntax would be used, the added code would be roughly something like this: table.jquery-tablesorter[sort-button="bottom"] th.headerSort { background-position: bottom 3px center; padding-right: 0.2em; padding-bottom: 12px; } , perhaps with some fallback for the crummy browsers. However, using an attribute to change CSS is probably not a good idea. I suggest using a simple CSS class (perhaps "headerSortVerticalPosition" or something) to change it, and have it applied to the <th> itself, rather than the entire table, so as to allow different positioning per button/header (making the selector be something like table.jquery-tablesorter th.headerSort.headerSortVerticalPosition).
The fix for bug 38911 and bug 53211 implemented in March 2014 means that the sorting button is now placed in the lowest header cell regardless of the complexity of the headers, or whether there are colspans/rowspans in the headers. This was discussed here (will eventually be archived): *[[Help_talk:Sorting#Table_with_more_complex_headers]] See also: *[[Help:Sorting#Tables_with_complex_headers]] So it is now possible to create a lower row of header cells with sort buttons. This was not possible in the past, if I am remembering correctly, or it was problematic. I recently created the following help section: *[[Help:Sorting#Putting_sorting_buttons_below_header_text]] It discusses how to set it up, and some options for the lower row of header cells: So I am going to change the title of this bug to "Option for sort indicator to be below the table header text". And then I will change the status to resolved.
