View source for Template talk:Sticky header

{{archives|age=90 |bot=lowercase sigmabot III}}
{{User:MiszaBot/config
| algo = old(90d)
| archive = Template talk:Sticky header/Archive %(counter)d
| counter = 2
| maxarchivesize = 125K
| archiveheader = {{Automatic archive navigator}}
| minthreadstoarchive = 1
| minthreadsleft = 5
}}
== Template:Flat list and sticky header ==

Table using {{t|sticky header}}. I can't figure out why the anchors embedded in this state-by-state table work correctly in Vector 2022 and Vector 2010: 
*'''[[Legality of cannabis by U.S. jurisdiction#By state]]'''
It uses '''{{t|flatlist}}''' for its '''horizontal table of contents.''' 

It is discussed here: 
*[[Help:Tables and locations#Horizontal table of contents for a table of states or countries]].
--[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 12:28, 30 October 2024 (UTC)

:{{re|Timeshifter}} This is a continuation of the discussion above and the linked discussion does not add anything new. When I test that table in Vector 2010, I see the same issue mentioned above where jumping to "Alabama" hides the top part of the row's content. In this case, the "Main article: Cannabis in Alabama" line in the "Notes" column is too far up. {{tlc|Flatlist}} does not do anything with anchor links. That table has the standard links with "#" above the table with id attributes in the table's rows for them to jump to. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 13:07, 30 October 2024 (UTC)
::{{ping|Jroberson108}} OK. I guess in Vector 2017 I didn't really notice it since it only covers one line at the top of the notes. The row header (state name) is not covered at all. 
::So for the horizontal TOC templates using "id" as the anchor inside the table I don't see a problem with using these TOC templates with tables with only one sticky row of text. As long as the table row headers going down the left column are centered, and are down at least one row due to multiple lines of text in each row. 
::People can't use 2010 Vector unless they are logged in. So there aren't that many people who are effected. The benefits of having the sticky header outweigh the small inconvenience for a few people of having to scroll up one row to see that missing text. The sticky header helps tremendously with many tables. 
::--[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 14:06, 30 October 2024 (UTC)
:::{{re|Timeshifter}} The table content is aligned middle vertically and the contents in the "Notes" cell is taller than the other cells in most cases, so that is why its top is covered and not the state name. For "Michigan", three cells are covered with two being partial lines. If the states were top aligned, then they would be covered too. This occurs in all skins except Vector 2022. The taller the sticky rows are (multiple rows and/or wrapping), the more that is covered. For Vector 2022, the top line of the row is partially covered if there are three sticky rows with non-wrapped headers. The reason this works for the most part in Vector 2022 is because they fixed it in commons. They need to do the same for the other skins, which I'm sure someone can request. When logged out, Vector 2022 is used on the desktop version. For mobile, MinervaNeue is used and that table's TOC does show. On my Android, the links jump way below the target unless I zoom all the way out either before or after the jump, most likely related to the Android issue under the "Known issues" section. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 18:03, 30 October 2024 (UTC)

== Sticky headers mobile problem ==

Hello not sure if you are aware but all the lists for games that use sticky headers in the mobile version are not working. When on the mobile version I cant scroll to the right it is just stuck and fixed into that position? 

Please help. [[User:NakhlaMan|NakhlaMan]] ([[User talk:NakhlaMan|talk]]) 02:59, 18 March 2025 (UTC)

:{{re|NakhlaMan}} I moved your question to the related talk page. From your contributions, I believe you are asking about [[List of Sega Genesis games#Licensed games]]. Lastly, which phone and browser are you using? [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 05:49, 18 March 2025 (UTC)

:In testing [https://en.m.wikipedia.org/wiki/Template:Sticky_header/testcases] on Windows 10 Chrome, it does look like the mobile version stopped working. There must have been some changes they made to the global styles. I'll have to take a closer look. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 06:17, 18 March 2025 (UTC)
:On mobile, the parent container <code><nowiki><div id="mw-mf-page-center"></nowiki></code> has an <code>overflow: hidden;</code> style applied to it, which makes this template not work. I'm still looking into it. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 07:11, 18 March 2025 (UTC)
:Looks like the style was added to fix some issues per [https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/8c19fb6c23d99fb2d56931fd7cc24e33b807a0ca/resources/skins.minerva.styles/common.less]: {{tq|Without this the page actions and user dropdowns in advanced mobile mode or desktop mode will create a horizontal scrollbar.}} [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 07:27, 18 March 2025 (UTC)
:Mentioned at [[phab:T387768]]. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 21:07, 18 March 2025 (UTC)
:{{re|NakhlaMan}} Since sticky doesn't work on Minerva (mobile) anymore, I removed the override so that wide table scrolling works again, at least when the screen is 639px wide or less. There is still an issue where the scrolling doesn't work on wider screens, but that is outside the scope of this template (see [[phab:T388986]]). [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 19:22, 19 March 2025 (UTC)
::FYI: {{tl|sticky header}} works again on the Minerva skin, if the width of the screen is not too small. [[User:Miria~01|<b style="background-color:white; color:black">Mir</b><b style="background-color:white; color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 18:52, 12 July 2025 (UTC)
:::{{re|Miria~01}} Reverted changes. Should work on smaller screens again like before. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 23:36, 12 July 2025 (UTC)

== Does Android info need to be updated in "known issues" ==

[[User:Jroberson108]]. I noted that sticky tables do not work at all (no matter the width) in my [[iPhone SE 2020]] in Safari, Firefox, Chrome, Edge, and Opera browsers.

See '''[https://en.wikipedia.org/wiki/Template:Sticky_header/doc/Narrow_tables page of narrow sticky tables]''' for testing in cell phones, etc. 

What's happening in Android? Does the Minerva issue effect Android the same way? Or does sticky still work at times? --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 03:11, 10 May 2025 (UTC)

:The changes they made to Minerva causes it to not work at all. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 03:24, 10 May 2025 (UTC)
::So in your Android phone sticky headers do not work no matter the width of the table? Have you tested in Firefox, Chrome, Edge, and Opera browsers? If so, I think we should put that new Android info in the Minerva section of "Known issues". 
::--[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 03:34, 10 May 2025 (UTC)
:::I updated the Minerva info. I assumed {{tl|sticky header}} is not working at all on your Android phone at any table width. I discovered that mobile sticky works fine with {{tl|sticky table start}}. --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 19:07, 12 May 2025 (UTC)
::::I encountered the same problem. On Android  (e.g., in Chrome), {{tl|sticky header}}  works if you not using the mobile version of an article. However, if you using the mobile version, it actually doesn't work. '''Not only on Android, but also on Windows'''... Here's an example of an article with a long table (the first one in the article) using the template.
::::* https://en.wikipedia.org/wiki/All-time_Olympic_Games_medal_table -> working
::::* https://en.m.wikipedia.org/wiki/All-time_Olympic_Games_medal_table -> not working
::::[[User:Miria~01|<b style="color:black">Mir</b><b style="color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 12:35, 1 June 2025 (UTC)
:::::{{re|Miria~01}} I see what you are saying. Does anybody look at the mobile skin Minerva on desktop PCs? Or tablets? How many people? And why? --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 14:48, 1 June 2025 (UTC)
::::::Rereading the discussion, I see that my post didn't reveal any new information. I thought Android always runs the Minerva skin, even if you change the URL for a mobile-friendly website by removing the "m." before the domain name. But the skin changes then, too, and that's why it works on Android (Chrome, Firefox etc.).<br/>
::::::Regarding your question: the number of people using Minverva on desktop PCs is probably negligible. [[User:Miria~01|<b style="color:black">Mir</b><b style="color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 15:14, 1 June 2025 (UTC)

== Templates with implemented {{tl|sticky header}} ==

Hello,
I would like to ask for your help or advice for a small problem. [[Template:Medals table]] has implented {{tl|sticky header}} in their code <small>(<code>...local sticky = frame:extensionTag{ name = "templatestyles", args = {src = "template:sticky header/styles.css</code>)</small> and it works perfectly and is a great addition. However, there are also very long tables, and it would be good if they were scrollable in a container like {{tl|sticky table start}}.
In [[All-time Olympic Games medal table#Complete ranked medals (excluding precursors)|All-time Olympic Games medal table]], we even have three long tables one after the other, and that's not good. Therefore, I tried wrapping them in a container (see my [[User:Miria~01/sandbox2]]) with<br/><code> div style="overflow-y:auto; max-height: 50vh; max-width: max-content; font-size:90%"</code>. Unfortunately, the sticky headers jump in the container itself when the media screen is scrolled. Is there perhaps a workaround without having to adopt the properties of {{tl|sticky table start}} globally for all tables with the [[Template:Medals table]]? [[User:Miria~01|<b style="color:black">Mir</b><b style="color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 12:08, 18 June 2025 (UTC)

:{{re|Miria~01}} In the Vector (2022) and Timeless skins at certain widths, there are other top-sticky elements that appear at the top of the page and will hide/obstruct the table headers when the headers are top-sticky too. In those instances, this template shifts the headers below the competing elements. Because you added an element around the table that the headers can stick to, the headers stick to the top of that instead of the page, but the adjustment still occurs. {{tlc|Sticky table start/end}} is made with a similar element around the table, but without that adjustment since it will never stick to the top of the page.
:As far as a fix goes, because this is done through {{tlc|Medals table}}, adding inline styles to the article cannot fix it. Adding page-level styles to that article might override the top values by setting them to 0? However, I suspect since {{tlc|Medals table}} used this template and not the other, there is consensus or at least a desire from the developer(s) to have headers stick to the top of the page and not a wrapper element. I suggest asking there if they want to switch to using {{tlc|sticky table start/end}} or maybe add a template flag so editors can choose which sticky template to use. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 16:08, 18 June 2025 (UTC)
::Thanks for the answer. Actually, I proposed implementing this for the template in August 2024 (before that, I was unaware of {{tlc|sticky table start}}. However, I saw that many users in other sport tables had switched from {{tlc|sticky table start}} to {{tlc|sticky-header}} and wanted to look for a custom solution first.  I'll ask later whether there's a consensus to switch it at {{tlc|Medals table}}.
::Can I ask what you mean by "add a template flag"? Do you mean an additional parameter in the {{tlc|Module:Medals}} table specifying which .css file should be used at the template and by default, if the parameter isn't specified, sticky-header could still be used. [[User:Miria~01|<b style="background-color:white; color:black">Mir</b><b style="background-color:white; color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 16:55, 18 June 2025 (UTC)
:::Just for your information, with these changes in {{tlc|Template:Medals table}}, this switch would work, tested with [[Module:Sandbox/Miria~01/2]] on [[User:Miria~01/sandbox2]] with <code>{{#invoke:Sandbox/Miria~01/2|createTable|style=alt </code> for the first table and for the second table with <code>{{#invoke:Sandbox/Miria~01/2|createTable</code>. These would be the changes in {{tlc|Module:Medals table}}
:::<syntaxhighlight lang="lua">local stylesheet = args['style']
local sticky = frame:extensionTag{ name = "templatestyles", args = {src = "template:sticky header/styles.css" } }
local sticky
if stylesheet == 'alt' then
        sticky = frame:extensionTag{ name = "templatestyles", args = {src = "template:sticky table start/styles.css"} }
else
sticky = frame:extensionTag{ name = "templatestyles", args = {src = "template:sticky header/styles.css"} }
end
...
...
if stylesheet == 'alt' then
root:addClass('sticky-table-head')
else
	   root:addClass('sticky-header-multi')
end
		root:css('text-align', 'center)

...
...

if stylesheet == 'alt' then
  local container = mw.html.create('div')
  :addClass('sticky-table-scroll')
  :wikitext(tostring(root))

  local outerContainer = mw.html.create('div')
  :addClass('sticky-table-collapsible')
  :node(container)
 return header .. sticky .. tostring(outerContainer) .. footer
else
return header .. sticky .. tostring(root) .. footer
end
end
</syntaxhighlight>
::::{{re|Miria~01}} It would be a template parameter that the module would use. See [[WP:PARAMETER]]. The logic is mostly correct, although what changes for "sticky table start" is the css file, table class, and adding the same divs around the table to match what that template does.
::::Better would be to include {{tl|sticky table start}} and {{tl|sticky table end}} above and below the table so the css include and divs exist in one location, but not sure if possible since the elements are built in the module instead of printing out tags from a string. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 18:54, 18 June 2025 (UTC)
{{u|Miria~01}}. I will not have time to help, but I thought I would point out that you need a background color for your username in your signature in dark mode. In dark mode I can't see "Mir" since it is black text on a black background.--[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 16:12, 18 June 2025 (UTC)

:thanks, I changed that directly. [[User:Miria~01|<b style="background-color:white; color:black">Mir</b><b style="background-color:white; color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 16:27, 18 June 2025 (UTC)
{{od|:}} {{reply to|Jroberson108}} A little info, I just saw (by accident, because I had implemented it that in my sandbox for a table) that {{tl|sticky table start}} works with {{tl|sticky header}}. But that wasn't the case a week ago, and I also noticed that no changes have been made to the code (neither for sticky table start, sticky header, nor [[Module:Medals table]]). I implemented that into the tables in the described article and it now fits and there are no jumps (see [[All-time Olympic Games medal table#Complete ranked medals (excluding precursors)|here]]).
<syntaxhighlight style="font-size:85%">
<div style="font-size:90%">
{{sticky table start}} 
{{Medals table
 | caption        =
 | host           =
 | remaining_text =
 | show_limit =
 | team           = {{Tooltip|NOC|National Olympic Committee}}
 | flag_template  = flagIOC
 | event          = Summer
 | gold_USA = 1105| silver_USA = 879 | bronze_USA = 781
 ...
|}
{{sticky table end}}</syntaxhighlight>[[User:Miria~01|<b style="background-color:white; color:black">Mir</b><b style="background-color:white; color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 22:50, 26 June 2025 (UTC)

:{{re|Miria~01}} That puts the table that is already sticky from this template in a scrollable box styled by {{tlc|sticky table start}}. Technically, the two templates shouldn't be used together due to competing styles. They are two separate templates to try to accomplish a similar style. It appears to be working, at least in the default desktop skin, but that may not always be the case since they are developed independent of each other. It would be best if one or the other were used. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 11:01, 28 June 2025 (UTC)
::It also works on the Minerva skin (mobile), but you're right, it's not an ideal solution. [[User:Miria~01|<b style="background-color:white; color:black">Mir</b><b style="background-color:white; color:#EE3939">ia~01</b>]] ([[User talk:Miria~01|talk]]) 11:59, 28 June 2025 (UTC)

== Missing borders ==

The sticky-header and sticky-header-multi classes cause the bottom row and rightmost column to lack, respectively, bottom and right borders. Normal table:
{{sticky header}}
{| class="wikitable sortable"
! Heading !! Heading
|-
| Cell || Cell
|-
| Cell || Cell
|-
| Cell || Cell
|}

With sticky-header class:
{| class="wikitable sortable sticky-header"
! Heading !! Heading
|-
| Cell || Cell
|-
| Cell || Cell
|-
| Cell || Cell
|}
{{sticky header}} [[User:Hairy Dude|Hairy Dude]] ([[User talk:Hairy Dude|talk]]) 09:35, 22 July 2025 (UTC)

:{{re|Hairy Dude}} Which browser, device/OS and skin so I can try to reproduce the issue? Borders are recreated due to them missing in Windows Firefox.
:I tested all my Windows 10 browsers (Chrome, Edge, Brave, Firefox) with Vector 2022 skin, no issues. Android Chrome/Firefox with Minerva skin: landscape no issues, but portrait shows the table (not cells) missing a right and bottom border. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 10:32, 22 July 2025 (UTC)
:{{to|Hairy Dude}} - all borders displayed in light and dark mode for me! (Safari 14, macOS 11, Vector 2022 skin, 'sticky headers' gadget disabled). - [[User:Asdfjrjjj|Asdfjrjjj]] ([[User talk:Asdfjrjjj|talk]]) 05:12, 29 July 2025 (UTC)