Wikipedia

Template talk:Sticky header/Archive 1

< Template talk:Sticky header
Latest comment: 5 months ago by Jroberson108 in topic Can someone please add this to the German Wikipedia?
Archive 1
Latest comment: 8 months ago1 comment1 person in discussion

See most recent Village Pump discussion. And other archived discussions: 1. 2. 3. 4. 5. See Phab:T42763. See also: Meta: Community Wishlist Survey 2022/Reading/floating table headers and meta:Community Wishlist Survey 2021/Reading/Enable sticky table headers.

For more info and history see:

--Timeshifter (talk) 04:38, 8 October 2023 (UTC)

Why does this not work on this table?

Latest comment: 8 months ago3 comments2 people in discussion

The table in this section here:

Partial table with templates installed below:

World Championship record
Year Round Position GP W D L GS GA
  1938 Did not qualify
  1954
  1958 Match for 5th place 6 6 3 0 3 118 102 
{{mw-datatable}}{{sticky header}} 
{| class="wikitable mw-datatable sticky-header" style="text-align: center;"
!colspan=9|[[IHF World Men's Handball Championship|World Championship record]]
|-
!Year
!Round
!Position
!{{Tooltip|GP|Games played}}
!{{Tooltip|W|Won}}
!{{Tooltip|D|Draw}}
!{{Tooltip|L|Lost}}
!{{Tooltip|GS|Goals scored}}
!{{Tooltip|GA|Goals against}}
|-
|{{Flagicon|Nazi Germany}} [[1938 World Men's Handball Championship|1938]]||colspan="8" rowspan="2" | ''Did not qualify''
|-
|{{Flagicon|Sweden}} [[1954 World Men's Handball Championship|1954]]
|-
||{{Flagicon|East Germany}} [[1958 World Men's Handball Championship|1958]]||Match for 5th place||6||6||3||0||3||118||102
|}

--Timeshifter (talk) 18:39, 16 October 2023 (UTC)

@Timeshifter: Did you forget? Only works with "sortable". See #3 in Template_talk:Sticky_header#Issues and Template:Sticky_header#Usage. This is unrelated, but you should change the first colspan header row to a caption. Jroberson108 (talk) 01:40, 17 October 2023 (UTC)
Oops. I knew in my bones it was going to be something embarrassingly simple. I have been adding sticky headers often, and so I guess I rarely see tables that don't sort. And {{static row numbers}}, another one I have added to many tables, works whether the table is sortable or not. Will go take care of the table now. --Timeshifter (talk) 12:52, 17 October 2023 (UTC)

Adding sticky headers for tables that are not sortable

Latest comment: 7 months ago4 comments3 people in discussion

Hey,

there are tables in which steaky headers make sense, but where it does not make sense to be sortable.

Like the table "Previous Years": https://en.wikipedia.org/w/index.php?title=Visa_requirements_for_Indian_citizens#Recent_changes

Could you please make sticky headers available for non-sortable tables? WikiPate (talk) 15:35, 5 November 2023 (UTC)

@WikiPate: Doesn't seem like sticky headers are needed. It only has two headers, which are easy to remember. The year values can even be figured out without the header. I think this template should probably add some recommended uses like at least a certain number of column headers and rows. Jroberson108 (talk) 23:40, 5 November 2023 (UTC)
Then take this table: https://en.wikipedia.org/wiki/Boeing_737#Specifications
Sticky headers would be an improvement but sorting does not make sense here.
And here: https://en.wikipedia.org/wiki/Competition_between_Airbus_and_Boeing#Orders_and_deliveries
The arrows make the table even wider so there is more vertical scrolling necessary due to that. Without the arrows for sorting it would be better. WikiPate (talk) 00:32, 6 November 2023 (UTC)
I added {{sort row|22}} to the planes table. Note that it narrows the table. But that table is still too wide. It should be 2 tables. One for Airbus, and one for Boeing. And those names should be table captions. That would narrow the vertical height of the sticky header. Better for cell phones. --Timeshifter (talk) 02:42, 6 November 2023 (UTC)

Borders on sticky headers in Firefox tables

Latest comment: 7 months ago7 comments3 people in discussion

@Jroberson108: Greetings. I would like to get some borders on Firefox sticky headers created by {{sticky header}}.

Also in some of the tables found here:

Is it possible for Firefox using {{sticky header}}?

Feel free to use Template:Header test and User:Timeshifter/Sandbox229 in any way. --Timeshifter (talk) 23:18, 4 October 2023 (UTC)

@Timeshifter: So basically Template:COVID-19_pandemic_data/sandbox/styles2.css, which all the referenced tables use. You can search for the CSS comment "Fix Firefox missing borders", which might help you in your testing. Be sure to test with Apple devices too. Also in Windows Chrome, your implementation shows transparent borders, so the text under the sticky headers show through. Jroberson108 (talk) 23:32, 4 October 2023 (UTC)

This is way beyond my skill level. I basically just copied Tol's CSS to get it to work. I was surprised it worked without the Lua module. I guess the Lua module is just a switch in {{import style}}.

I see though that the CSS you refer to is much more complicated, and beyond my level of CSS knowledge: 

	/**
	 * Fix Firefox missing borders due to position sticky and "wikitable"
	 * collapsed borders.
	 */
	.covid19-container .wikitable {
		border-collapse: separate;
		border-spacing: 0;
		border-width: 1px 0 0 1px;
	}
	.covid19-container .wikitable td,
	.covid19-container .wikitable th,
	.covid19-container .static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
		border-width: 0 1px 1px 0;
	}
	.covid19-container .static-row-numbers.wikitable tr::before {
		border-color: #a2a9b1;
		border-style: solid;
		border-width: 0 1px 1px 0;
	}

Maybe Tol and/or Dinoguy1000 can help. They have managed to get borders on some sticky headers. My time is limited due to serious health problems the last almost 2 years. Which is why I haven't been checking stuff on my iphone SE 2020 as I did in the past. I just checked now, and see that none of these sticky headers (old or new template) are working in my iphone. See various examples here:

--Timeshifter (talk) 00:26, 5 October 2023 (UTC)

@Timeshifter: All the Lua module does is add code to import one or multiple template styles.
<templatestyles src="[STYLE1].css"/> <templatestyles src="[...].css"/>
You could have just as easily used the following include in the template you created so as to not duplicate the CSS. Or Tol could have added it, since it seems like something he is managing.
<templatestyles src="template:Import style/sticky.css"/>
If this is beyond your current knowledge, then I suggest leaving it alone. If I recall, I think TheDJ said he would work on a solution when he finds the time. I don't recall where he said it though.
It's always better to discuss caveats and solutions first, then thoroughly test (Windows, Apple, Android) before going live with a solution. As you mentioned, the current solution doesn't work on your iPhone.
In my opinion, I think the templating system for tables should do what sortable changes, which is to move consecutive full rows of column headers found at the top of the tbody container into thead. Otherwise, the sticky header template would have to duplicate the same JavaScript to move them so it also works with non-sortable tables.
As it sits, I don't know if TheDJ or anyone else is planning anything that would undo any work put into this solution. The work I did on the COVID tables was extensive, not something I want to repeat if another solution is either in the works or on the way. Also, having duplicate CSS (Tol and you) managed separately should be fixed. His original CSS only targeted non-table headers, so perhaps it can be reverted back to that and the new template can just target tables?
Sorry to hear that you have had serious health problems for years. Jroberson108 (talk) 02:53, 5 October 2023 (UTC)
@Timeshifter: Not really sure what I'd be doing here to "help". My CSS to restore cell borders is extremely hacky (like a lot of the rest of my sticky table header CSS, to be completely honest), because I never took the time to investigate why the borders were actually disappearing, so I basically just brute-forced them back into being (and it shows if you examine my CSS - there's a lot of rules dealing with [literal] edge cases). The CSS you quoted in your message looks much more elegant, as I would expect from the CSS' author understanding the underlying cause and fixing that more directly.
All that aside, I never spent any significant amount of time testing my CSS; I pretty much just got something that worked on my browser of choice (Firefox, though I might've still been on Chrome at the time), did some quick checks in one or two other browsers, and called it good enough. I've fixed a couple bugs since then, but still haven't done any amount of serious testing (and don't really plan to, though I'll continue to fix bugs as best I can, in response to things I notice or that get reported to me). 「ディノ奴千？！」☎ Dinoguy1000 04:52, 5 October 2023 (UTC)
Jroberson108 and all. What you did with the scrolling tables outlined in green in my original post is a thing of beauty. It's a shame it is not being used on regular, non-scrolling, tables.
It's been a long time since I last looked at those scrolling tables in a cell phone. But I just did, after spending some time figuring out the browsers again. All the sticky headers all work perfectly in my iphone. Both vertical and horizontal scrolling. In Safari, Chrome, Edge, Firefox, and Opera. But you probably knew that since you probably found other people with iphones.
I had to create a new template because I wanted simple template and class names. I was finding it too difficult to remember the old names without having to look them up. Now I much enjoy adding sticky headers on any table I desire since the names are easy to remember. Lots of people want sticky headers. If I, a longtime experienced table editor, found the old template and class names to be difficult to use, then average editors will too. And they did, because the old template was little used. At least for sticky headers.
We have been waiting 11 years for MediaWiki to do something with sticky headers. See Phab:T42763.
If they do come up with something it is not difficult to stop these templates and associated CSS pages from working. All the code can be removed, and some noinclude or hidden note tags can be added, wrapped around a note explaining that {{sticky header}} and {{Import style|sticky}} no longer work, and can be removed from tables.
If you or anybody else can come up with some code to add borders to Firefox sticky headers in desktop view, I would greatly appreciate it.
And if by some miracle, mobile view can be made to work too, that would be great. --Timeshifter (talk) 10:15, 5 October 2023 (UTC)
@Timeshifter: Fixed borders. In regard to your mobile comment, I fixed it for small screen width (<= 720px), which works on Windows when viewing mobile version (https://en.m.wikipedia.org/...), but there is still something missing for it to work on Android in portrait mode. Jroberson108 (talk) 19:14, 18 November 2023 (UTC)

Android browsers

Latest comment: 7 months ago3 comments2 people in discussion

Jroberson108. Which Android browsers have you tested this in? And what are the results? --Timeshifter (talk) 21:15, 24 November 2023 (UTC)

Chrome and Firefox. If a table with sticky headers is wider than the screen, then sticky doesn't work for it and any other tables. It works if I zoom all the way out so the entire table is visible. If I zoom in again just a little, it stops working again. Jroberson108 (talk) 21:30, 24 November 2023 (UTC)
Thanks. Can you test Edge and Opera too? --Timeshifter (talk) 21:50, 24 November 2023 (UTC)

Issues

Latest comment: 6 months ago8 comments2 people in discussion

For your reference. Here's all the issues I've found with making "thead" top-sticky.

  1. Windows browsers work. Android browsers work in landscape mode (not portrait), and the first top-sticky row when scrolled up is partially hidden (too far up) and not readable. iPhone browsers don't work per Timeshifter's [iphone SE 2020] tests. Unable to test other Apple products.
  2. Doesn't make row headers left-sticky, only column headers top-sticky.
  3. Only works with "sortable".
  4. Once sorted, the "sorttop" row is top-sticky (moved into thead) with a transparent background showing mixed content when scrolled.
  5. On non-wikitable tables, top-sticky rows have a transparent background and cell spacing showing mixed content when scrolled.
  6. Firefox (Windows and Android landscape) borders missing on top-sticky rows. Chrome (Windows and Android landscape) borders are transparent showing content when scrolled. Edge (Windows, didn't test mobile) borders are transparent showing content when scrolled.
  7. If it did work on mobile and there were several top-sticky rows or some spanning multiple lines, then they could block most or all of the table data on small screens, especially in landscape mode, with no way to disable the sticky feature. Each table would need a link to disable the sticky feature.

Jroberson108 (talk) 01:11, 9 October 2023 (UTC)

Jroberson108. I just checked (again?) all the iphone SE 2020 browsers I have installed: Safari, Edge, Firefox, Opera, and Chrome. Sticky headers do not work in any of them. I noticed this time that the internal header borders were removed from all the templated tables in those iphone browsers too. See example tables here: User:Timeshifter/Sandbox230. --Timeshifter (talk) 07:13, 9 October 2023 (UTC)
Iphone browsers now work. See following talk sections. --Timeshifter (talk) 17:51, 29 November 2023 (UTC)

class=sorttop rows

Could you give me an example table for this?: "Once sorted, the 'sorttop' row is top-sticky (moved into thead) with a transparent background showing mixed content when scrolled." --Timeshifter (talk) 07:13, 9 October 2023 (UTC)

column
sorttop
data 1
data 2
data 3
data 4
sortbottom
Jroberson108 (talk) 07:37, 9 October 2023 (UTC)

Showing wikitext. Gives me room to scroll the above table too.

I tested it further and it seems to only be a problem with class=sorttop

I saw that you put class=sortbottom in the table, too, and so I wasn't sure until I tested it. 

{{sticky header}}
{| class="wikitable sortable sticky-header"
|-
! scope="col" | column
|- class="sorttop"
| sorttop
|-
| data 1
|-
| data 2
|-
| data 3
|-
| data 4
|- class="sortbottom"
| sortbottom
|}

--Timeshifter (talk) 07:48, 9 October 2023 (UTC)

Yeah, no issues with "sortbottom", just added both so complete. Once sorted, the "sortbottom" row is moved into "tfoot", which this template's CSS doesn't target. Jroberson108 (talk) 07:56, 9 October 2023 (UTC)

From Template:Static row numbers header is this table excerpt using class=sorttop:

I added {{sticky header}} and class=sticky-header

Cumulative COVID-19 deaths at the start of each month in 2021
Date First case Jan 1 Feb 1 Mar 1 Apr 1 May 1 Jun 1
World 1,472,363 1,786,759 2,021,136 2,262,948 2,603,854 3,663,570
Days to double 112 105 113 130 143 154
Countries and territories 196 202 202 205 206 209
  USA March 3, 2020 335,789 436,051 508,584 545,887 569,722 588,756
  Brazil March 19, 2020 193,875 223,945 254,221 317,646 401,186 461,931

Here it is with class=sticky

It fixes the problem as long as it is a single header row. Laddering and number of lines within that single row does not matter. See the single-header row example in User:Timeshifter/Sandbox228 too.

Cumulative COVID-19 deaths at the start of each month in 2021
Date First case Jan 1 Feb 1 Mar 1 Apr 1 May 1 Jun 1
World 1,472,363 1,786,759 2,021,136 2,262,948 2,603,854 3,663,570
Days to double 112 105 113 130 143 154
Countries and territories 196 202 202 205 206 209
  USA March 3, 2020 335,789 436,051 508,584 545,887 569,722 588,756
  Brazil March 19, 2020 193,875 223,945 254,221 317,646 401,186 461,931

I noticed that looking at this in preview gives one room to scroll down the last table. --Timeshifter (talk) 08:37, 9 October 2023 (UTC)

Corrected sorttop sandbox number to User:Timeshifter/Sandbox228. Solution for class=sorttop only works for single row headers. It does not work for multi-row headers. --Timeshifter (talk) 17:45, 29 November 2023 (UTC)

Problem with template in cell overriding sticky header

Latest comment: 6 months ago7 comments2 people in discussion

See: https://en.wikipedia.org/w/index.php?title=List_of_state_parties_of_the_Republican_Party_(United_States)&oldid=1185476054

Note that the cell templates roll over the sticky header when the page is scrolled. This template:

Is there something "important" in that template?

  Republican majority

State/Territorial Party Chair Start Elected Executive Offices Upper House Seats Lower House Seats Website
Republican National Committee Ronna McDaniel January 19, 2017 Voting members:
Non-voting members: 		[1]
Alabama Republican Party John Wahl February 27, 2021 [2]
Alaska Republican Party Ann Brown May 14, 2021
(+1 Democrat in caucus)
(-2 caucusing with the Democratic coalition)
(-1 without a caucus) 		[3]

References

  1. ^ RNC site
  2. ^ AL site
  3. ^ AK site

--Timeshifter (talk) 00:45, 17 November 2023 (UTC)

@Timeshifter: Fixed. Works on Windows in Chrome, Edge, and Firefox browsers. Works on Android (landscape mode) in Chrome and Firefox browsers. Jroberson108 (talk) 17:45, 18 November 2023 (UTC)
Thanks for this, and for fixing the header borders! I have been testing it out here and there. I haven't had enough time to do many tests on my iphone SE 2020, but what I have seen so far in iOS looks good. Will report more later.
Also, I discovered that the rapid flag and link creation method described in Help:Table here (and following sections) also works in tables with cells with additional info in the first cells in rows. As long as there is a blank line before that additional info. See example table here: User:Timeshifter/Sandbox231. It shows many Help:Table options including a sticky header. The asterisks in data cells allow the columns to sort. They won't sort with just background colors. --Timeshifter (talk) 07:46, 20 November 2023 (UTC)
@Timeshifter: Strange, the table on your sandbox has sticky headers working on Android portrait mode. The table above and the top two on my sandbox don't. The only difference is the ones that don't work are wider requiring horizontal scrolling, where zooming out to see the whole table will make them work. Jroberson108 (talk) 12:30, 20 November 2023 (UTC)
State/Territorial Party Elected Executive Offices
Republican National Committee
Alabama Republican Party
Alaska Republican Party

A narrower table above for more tests.

In Safari on iphone iOS the sticky headers work if a table fits on the screen. But only if it is a "natural fit". If I zoom it to fit, then it doesn't work. Strange.

Or if it naturally fits, and I zoom it to increase the font size, then the sticky headers don't work. Even if the table still fits on the screen.

I just subscribed to each and every section on this talk page. I had missed some. I think that means you won't have to ping me. I think I will get a notification at the top of any page I am on. Not sure. --Timeshifter (talk) 13:46, 20 November 2023 (UTC)

Seems like you could just watch the whole page. The narrow table doesn't have sticky headers on Android portrait because the wider table above pushes the window wider. It only works if all widths fit the window width. On the covid project, I fixed this by restricting the width with a div wrapper and adjusting width and overflow. I'll have to play with it to see if I can do it without a div wrapper. Jroberson108 (talk) 13:55, 20 November 2023 (UTC)
I got a notification at the top of the page from your latest reply. I got notifications for your latest reply on both the watchlist and the top of the page. If I am only watching the whole page, I only see it on the watchlist. I noticed that if I am only subscribing to a talk section, but not watching the whole page, then I only get a top of page notification. No notification on the watchlist. --Timeshifter (talk) 20:46, 29 November 2023 (UTC)

Iphone browsers

Latest comment: 6 months ago1 comment1 person in discussion

My iPhone SE 2020 gets the latest iOS version.

In mobile view on iphone Safari, Edge, Firefox, Opera, and Chrome the sticky headers show up in both portrait and landscape view. It doesn't matter if the table extends past the screen. It doesn't matter on those 4 browsers whether I pinch/zoom. The sticky headers always work.

When I am logged out I see Vector 2022 in desktop view on all the browsers.

In desktop view on iphone Safari, Edge, Firefox, Opera, and Chrome in Vector 22 (logged in) it is different depending on whether the TOC is in the sidebar or the dropdown menu. Dropdown TOC: Sticky header works only if the widest table fits. Sidebar TOC: It only works if the sidebar TOC is visible on the screen, and only if the widest table fits. The Vector 2010 sticky header works if the widest table fits. And only if the Wikipedia sidebar menu is fully visible too (except Chrome where it doesn't matter). --Timeshifter (talk) 21:32, 29 November 2023 (UTC)

Desktop view on PCs

Latest comment: 6 months ago9 comments2 people in discussion

See this very wide table with a sticky header:

Narrow the browser window to make the table extend past the screen.

In desktop view on a Windows 10 Pro PC on Edge, Firefox, Opera, and Chrome the sticky headers always show up. It doesn't matter if the table extends past the screen. --Timeshifter (talk) 15:24, 1 December 2023 (UTC)

The doc says it works on desktop, so what's the problem? The problem is on mobile. Jroberson108 (talk) 15:45, 1 December 2023 (UTC)
The doc currently just says it works on desktop, but not whether it works if a table extends past the edge of the screen. I didn't remember, so I checked it against that very wide table linked above. This allows others to easily verify this too. --Timeshifter (talk) 17:48, 1 December 2023 (UTC)
Usually you just need to mention what doesn't work on the doc as you find it instead of listing every browser and platform that does work, which there are far more combinations than what is listed (desktop, laptop, tablet, phone, etc. / Windows, Mac, Linux, etc. / Chrome, Edge, Firefox, etc.). The template is live, so the reader can assume it works unless otherwise stated. The talk page is a good place to discuss what works and doesn't as opposed to bogging down the doc with too much information. The only time it doesn't work for me is on my Android phone when the table width exceeds the screen width regardless of browser, which affects all sticky tables on that page. Jroberson108 (talk) 19:37, 1 December 2023 (UTC)
I removed the browser list from the doc since in desktop computers they all work regardless of table table width.
In mobile view on my iphone SE 2020 I did not notice a difference between browsers when looking at the same page. For example, I just checked again by going to the Wikipedia home page and looking at the first article linked on the page. They all look exactly the same in mobile view in all 5 browsers. Is it the same for you in Android? --Timeshifter (talk) 21:21, 1 December 2023 (UTC)
Not sure why testing Wikipedia's home page matters? We just need to test tables using this template. If you can't find any issues with iPhone, then we just need to mention Android in a section maybe named "Known issues". Might can also mention that it only works with "sortable", which isn't fixable. Should mention the issue of having too many column header rows on mobile landscape mode where it can cover up most or all of the data. Lastly mention your "sorttop" workaround too, although it bypasses all the recent styles fixes I did like for borders and mobile, so it needs more testing or be omitted. Jroberson108 (talk) 22:42, 1 December 2023 (UTC)

I meant the first article link out on the Wikipedia home page. It is just an easy, fast way to verify that the mobile view is the same on my iphone SE 2020 between browsers. I had already tested tables at another time. I wasn't paying much attention then to whether the mobile view was exactly the same between browsers. This time that is all I was paying attention to. So I guess it is not really accurate to say we are looking at different browsers in mobile view in an iphone SE 2020.

Does mobile view look exactly the same between browsers on Android?

Doc already says "It only works with sortable tables." On the top line of the doc.

I added a note in the top section about too many column header rows.

Sorttop workaround is linked from the "Special Cases" section of the doc. That workaround class already existed in Tol's original template. I copied Tol's template to create this template. Feel free to create a better solution. That is not my area of expertise.

Android issues are mentioned here:

I think it is important to mention what works. Otherwise people may mistakenly believe it works on desktop, laptop, tablet, phone, etc. / Windows, Mac, Linux, etc. / Chrome, Edge, Firefox, etc.. We don't know yet whether it works in tablets, ipads, laptops, Linux, desktop Macs, etc.. See WP:NOTPAPER. The doc page is not long at all, and some stuff has been moved to sandboxes. --Timeshifter (talk) 23:54, 1 December 2023 (UTC)

What does WP:NOTPAPER have to do with this discussion? It's not a mistake to believe something works unless specified, which most templates that I looked at take the same approach. You add to the list when issues are found. Also, you have contradictory statements in that section saying it works on Android, then it doesn't. Very confusing, have to keep it simple and concise. I'll try to clean up the doc when I have a chance. Jroberson108 (talk) 02:12, 2 December 2023 (UTC)
I clarified and shortened it. --Timeshifter (talk) 05:32, 2 December 2023 (UTC)

Class sticky not working on mobile

Latest comment: 6 months ago13 comments2 people in discussion

The sticky class doesn't work on my Android phone and most likely on iPhone. It is not top-sticky and on the desktop version the borders are missing. The styles that fix mobile and the borders are for the sticky-header class, which is applied to and adjusts the table, and by extension adjusts the table's elements. The way the sticky class is implemented, it's applied to a row with no way to select the table.

Overall, targeting one row with the sticky class isn't a good solution. Better would be to instead add something to the table to target a single row like one of three classes: sticky-header-row1, sticky-header-row2, or sticky-header-row3. Then I might have a chance of applying similar styles to the table as a whole.

Also, I'm fairly certain targeting one row regardless of approach will have issues if there is a row of column headers above it with a rowspan that encroaches on the target row.

@Timeshifter: You have any thoughts on having the editor choose one of three classes to add to the table wiki instead of adding the sticky class to the target row? All this assumes having (after sort) top-sticky sorttop rows is undesirable. Jroberson108 (talk) 15:35, 3 December 2023 (UTC)

See sorttop tests:
User:Timeshifter/Sandbox228#Solution for single row header. Narrower table
User:Timeshifter/Sandbox233#Solution for single row header. Narrower table by itself
I've tested it in Safari, Edge, Firefox, Opera, and Chrome on iphone SE 2020.
Top-sticky for class=sticky does not work at all in mobile view on iphone.
In desktop view on the iphone it works if there is no table on the page extending past the screen. If one table is too wide, then top-sticky doesn't work on the narrow table too. Pinch/zoom-out will work sometimes if it makes the widest table fit.
There are no header borders in either view on the iphone.
However you decide to work on the sorttop problem is probably fine by me. Cause I have no clue. :)
--Timeshifter (talk) 19:33, 3 December 2023 (UTC)
Thanks for confirming that it also doesn't work on iPhone and rechecking other things. I thought it over more since yesterday and I think adding a class to the table wiki to target a single row would be the best approach. Obviously, the row will be counted from the top of the table. I may just add sticky-header-row1 and sticky-header-row2 for starters, and can add more if requested. I don't anticipate much usage for row 2 or a high demand for anything beyond. Jroberson108 (talk) 22:25, 3 December 2023 (UTC)
@Timeshifter: I added the sticky-header-row1 and sticky-header-row2 classes to the sandbox styles if you want to test it out. The old sticky class is commented out there too. I've tested them on my sandbox and it works on desktop and Android phone, with or without sortable. Jroberson108 (talk) 04:14, 4 December 2023 (UTC)
Can you link to the sandbox? --Timeshifter (talk) 04:20, 4 December 2023 (UTC)
It's in the doc on the right, but sure. It's at Template:Sticky header/sandbox/styles.css Jroberson108 (talk) 04:24, 4 December 2023 (UTC)
I looked on the bottom of the template and it said something about creating a sandbox. Didn't notice the top right link. I am not used to using template sandboxes since I don't create templates. I am running out of steam tonight. Can you link to your sandboxes where you have tested this? I wouldn't know where to begin, and don't want to figure it out. But I can test what you have figured out. --Timeshifter (talk) 04:36, 4 December 2023 (UTC)
The only issue, which I suspected above is when rowspan is used on the target row or on another row that encroaches on the target row. This same issue would exist with the old sticky class too. No way to fix it with styles. Jroberson108 (talk) 04:38, 4 December 2023 (UTC)
You must be really low on steam if you don't know where a user's sandbox is. User:Jroberson108/sandbox There are 8 tables at the bottom with section headers starting with "sticky-header-row1" and "sticky-header-row2". Add this to the top of your sandbox page to include the template's sandbox styles: <templatestyles src="Sticky header/sandbox/styles.css"/>. Don't add the {{Sticky headers}} code or you will include the template's live styles. Jroberson108 (talk) 04:46, 4 December 2023 (UTC)

My energy, health, and available time goes up and down. I don't have the time right now to create more sandboxes. I am not like you. I don't use one sandbox for everything. If you want help from me and others, I suggest using a numbered sandbox with one topic. I see a multitude of tables on your sandbox page. And I am supposed to combine this and that on another sandbox page. Please do all the work you can on a numbered sandbox page focused on one topic. Then I, or others, can do some iphone tests without spending a lot of time.

It's like you removing "transclusion count" from doc pages, and saying that it is OK because that link is found on the transclusion list. That is assuming average editors even know it exists. I learned long ago that developers often make assumptions based on their own skill level. Big mistake. Doc and help pages should be for new editors too, with little or no skill. Keep it simple. --Timeshifter (talk) 15:10, 4 December 2023 (UTC)

I'm in the process of setting the template's sandbox and testing pages, which is what they are meant for. I've already got the sandbox setup. Jroberson108 (talk) 15:19, 4 December 2023 (UTC)
@Timeshifter: From your last comment about me as a developer, which I take as a personal attack (WP:PA), I've decided to stop working on this project. This isn't the first time. "Comment on content, not on the contributor." (WP:READFIRST) FYI, I've removed this project from my watchlist. Jroberson108 (talk) 16:36, 4 December 2023 (UTC)
Jroberson108. It was in no way meant as a personal attack. In fact it is a common observation in business and elsewhere. People who are skilled in an area often make assumptions about others because they assume others must be able to see the "obvious". See: Curse of knowledge. And Keep It Simple. You could look at what I said as a complement, in that I am acknowledging your skill. I have made this observation elsewhere, and other developers were not offended. It's a general observation, with the caveat of "often". That is not a personal attack. --Timeshifter (talk) 18:10, 4 December 2023 (UTC)

Gap between top and sticky headers depending on screen size

Latest comment: 6 months ago8 comments2 people in discussion

@Timeshifter: Do you know why these styles are there? Depending on the screen size, these styles mess up the distance between the top of the screen and the sticky headers. This causes scrolling data to be visible both above and below the sticky headers. It should only be visible below. 

body.vector-sticky-header-visible .sticky {top: 3.125rem;}

body.vector-sticky-header-visible .sticky-header > thead {top: 3.125rem;}

Jroberson108 (talk) 18:32, 2 December 2023 (UTC)

No idea. That was copied from Tol's template.
I noticed the problem you mentioned now and then. I am trying to remember when exactly it occurs.
--Timeshifter (talk) 19:11, 2 December 2023 (UTC)
Let me know if you remember anything. If I remove or change those styles, it will have to also change on Tol's template since the exact same sticky and sticky-header classes are used. These duplications shouldn't exist to avoid these kinds of conflicts if a page uses both templates for some reason. Jroberson108 (talk) 03:59, 3 December 2023 (UTC)
Only the sticky class name is the same according to the doc here: Template:Import style. I have found only one situation where it is useful. See: User:Timeshifter/Sandbox228#Solution for single row header. So that class name could be changed in the CSS. --Timeshifter (talk) 05:17, 3 December 2023 (UTC)
Thanks for the link. Actually, there's no duplication. Tol's uses the is-sticky and is-sticky-head classes here: Template:Import_style/sticky.css.
The styles probably have something to do with the new Wikipedia redesign for the desktop version. It doesn't appear to affect the mobile version. When you scroll past the page title, on a wide browser the top menu becomes top-sticky and on a narrower browser it goes away and the page's hamburger button becomes top-sticky. The sticky headers currently appear below the top-sticky menu and button. The top-sticky button causes the data to be visible above the column headers when scrolled because it doesn't run across the entire width of the page like the menu. If the column headers were flush with the top of the page like it should be, the button would overlap the first column header making it partially unreadable when top-sticky. It definitely needs to be fixed, but seems like it will be difficult due to competing top-sticky elements. Jroberson108 (talk) 05:30, 3 December 2023 (UTC)
To add more complexity, the above description is for when I am logged in. When logged out, on a wide browser there is no top-sticky menu and on a narrower browser the hamburger button is top-sticky. The difference is that the column headers are sticky to the top of the page as opposed to under the button, which means the button overlaps part of the first column when scrolling, making it partially unreadable. Jroberson108 (talk) 06:17, 3 December 2023 (UTC)

See: Wikipedia:Village pump (technical)/Archive 208#Potential fix. About 3.125rem lines of css.

I vaguely remember seeing some kind of hamburger button weirdness.

See Global Search at Toolforge. Search for "{{Import style|sticky}}" - in quotes. 103 results. The results list many English Wikipedia articles using that. Is that class=sticky?

You can also search for the other classes(?) listed here:

Those seem to be old, no longer used, and no longer found in the CSS:

https://www.google.com/search?q=position%3A+sticky%3B

You can also search for "{{Import style" - in quotes. I think that pulls up everything. 109 results. I only see these 2:

  • {{Import style|sticky}} (103 results) and {{Import style|inputbox}} (6 results).

Template:Sticky header. See: "What links here" from English article space. It lists 142 articles transcluding the template.

Template:Import style. See: "What links here" from English article space. It lists 79 articles transcluding the template. All of those articles are transcluding the sticky headers template. Cause the inputbox class is used in only 6 pages (not in English Wikipedia articles) when you search for "{{Import style|inputbox}}" - in quotes. At Global Search.

Here are the subpages of Template:Import style:

I only see one other CSS subpage:

What does the Lua module do?:

--Timeshifter (talk) 07:25, 3 December 2023 (UTC)

Both templates are not used in the same article

See: How To: Find Duplicate Lines Using Notepad++.

I copied the 2 lists below into a text file, and alphabetized it. I scanned the list and saw no duplicates. I also used the above page to look for duplicates. There were no duplicates. So both templates are not used in the same article.

Template:Sticky header. See: "What links here" from English article space. It lists 142 articles transcluding the template.

Template:Import style. See: "What links here" from English article space. It lists 79 articles transcluding the template. All of those articles are transcluding the sticky headers template. Cause the inputbox class is used in only 6 pages (not in English Wikipedia articles) when you search for "{{Import style|inputbox}}" - in quotes. At Global Search. --Timeshifter (talk) 19:23, 4 December 2023 (UTC)

Problems with Template:Static row numbers subtemplates

Latest comment: 5 months ago3 comments2 people in discussion

Note to self.

{{Sticky header}} works with {{static row numbers}}. But it does not work well with this subtemplate: {{static row numbers table}} (at least as it was originally designed to be used; go there to see what to replace it with). {{Static row numbers table}} breaks another template (at least as it was originally designed to be used). So {{static row numbers table}} is not salvageable. It no longer serves its original purpose of simplifying the use of {{static row numbers}}.

{{Sticky header}} breaks this subtemplate: {{static row numbers arrows}}. The separate sort row disappears. Use {{sort row}} instead.

The above info needs to be in the doc. Or just the main point that {{Sticky header}} works with {{static row numbers}}. But it should not be used with these 2 deprecated subtemplates: {{static row numbers table}} and {{static row numbers arrows}}.

For why see:

Requiring editors to learn multiple places to add classes to tables is not simple, and is not a good idea. --Timeshifter (talk) 02:10, 3 December 2023 (UTC)

Don't rehash discussions here per WP:CROSS-POST. Also, no need to mention deprecated templates, especially ones that predate this one. You've already got plenty on those deprecated templates.
I've added an example of how to use this template with {{static row numbers}} and {{sort row}}. The example is useful for testing since this template's styles fix borders for {{static row numbers}}. Jroberson108 (talk) 03:34, 3 December 2023 (UTC)

For others reading this: all of the subtemplates of Template:Static row numbers are in the process of being deleted. So they will no longer be a problem. --Timeshifter (talk) 08:00, 7 January 2024 (UTC)

Can someone please add this to the German Wikipedia?

Latest comment: 5 months ago3 comments3 people in discussion

This template is a must-have for every wiki Daniel Maak (talk) 18:32, 24 January 2024 (UTC)

Dare I ping Jroberson108. :) --Timeshifter (talk) 21:03, 24 January 2024 (UTC)
@Daniel Maak: This template was created fairly recently and still has some kinks to iron out. Recently we found out that the mobile scroll on wide tables is broken when used with this template, which I'm certain is due to the display: table; and display: table-caption; styles, mentioned at Template talk:Static row numbers#Header cell outline and Wikipedia talk:Manual of Style/Accessibility#Are these nested tables accessible? (these edits). Also, the class to make one row top-sticky still needs to be redone so it's added to the table instead of the row so whole-table styles can apply, something that was being worked on per #Class sticky not working on mobile. A ticket is open to fix sortable's sorttop placement that causes issues with this template, see Phab:T355492. Finally, someone will need to do some research on the process to add templates to the German Wikipedia, if it's different. Jroberson108 (talk) 21:40, 24 January 2024 (UTC)
Retrieved from "https://en.wikipedia.org/w/index.php?title=Template_talk:Sticky_header/Archive_1&oldid=1220600604"