Template talk:Sticky header

  1. Home
  2. Wiki

Sticky header covering jump result

[edit]

See diff that adds this to "Known issues":

"Jumping to an {{Anchor}} (or similar mechanism for creating an anchor) in a table causes that location of the table to be at the top of the screen, where the sticky header covers it."

@DMacks: Where is this happening currently with {{sticky header}}? And in what browser, OS, device, etc.. --Timeshifter (talk) 17:31, 27 October 2024 (UTC)[reply]

@Timeshifter and DMacks: Template:Sticky header/testcases#Test perennial sources has some anchor/jump links above the table. Note, only "0-9" and "A" work due to the partial copy of the table. I see the issue in all skins except Vector (2022). The links don't show on the MinervaNeue skin (mobile) when the browser width is less than 640 pixels. Jroberson108 (talk) 18:17, 27 October 2024 (UTC)[reply]
Thanks Jroberson108. I compiled related discussion and help links here:
Wikipedia talk:Reliable sources/Perennial sources/styles.css
Related to:
Wikipedia:Reliable sources/Perennial sources#Sources
For testing of the sources table with {{sticky header}} see also this older version of the perennial sources article.
--Timeshifter (talk) 19:19, 27 October 2024 (UTC)[reply]

@DMacks, Graywalls, and Jroberson108: I see that this is the same problem Graywalls is describing here when using shortcuts to specific source names used in Wikipedia:Reliable sources/Perennial sources#Sources (WP:RSPSOURCES). Graywalls gives the shortcut example of WP:ADFONTES. Click it to see where you end up in the current sources table. Click here to see where you end up in the version of sources table with {{sticky header}}:

I tested it in Vector 2022 and Vector 2010 in Win 11 Pro in Firefox, Chrome, Edge. The shortcut works fine in Vector 2022. In Vector 2010 the result point is covered by the sticky header. Same as clicking on the alphabet links in the horizontal table of contents.

The anchor template variation used in the WP:RSPSOURCES table is this:

A specific example:

  • {{WP:RSPSHORTCUT|WP:ADFONTES}}

In the sources table it produces this:
WP:ADFONTES 📌

Can this problem be fixed for the older skins? And why does it work correctly in Vector 2022? --Timeshifter (talk) 08:45, 29 October 2024 (UTC)[reply]

@Timeshifter: See Template talk:Sticky header/Archive 1#Headings cover the row when you link an anchor in a table. Jroberson108 (talk) 13:48, 29 October 2024 (UTC)[reply]
Thanks for the link. We are currently up to 51 articles using both {{Compact TOC}} and {{sticky header}}.
Would it be possible to create a separate {{Compact TOC}} just for use with {{sticky header}}?
{{Compact TOC for sticky header}}
Would that solve the problem?
One solution I see has the anchors removed altogether from the tables. See: Solubility table.
It has {{sticky header}} for each of the constituent tables. The A-Z links from {{compact TOC}} go to the A-Z section headings between the tables.
In Windows 11 Pro on my PC the A-Z links work in the browsers and skins I tested so far: Firefox, Chrome, Edge. In Vector 2022 and Vector 2010. --Timeshifter (talk) 12:11, 30 October 2024 (UTC)[reply]

Template:Flat list and sticky header

[edit]

Table using {{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:

It uses {{flatlist}} for its horizontal table of contents.

It is discussed here:

--Timeshifter (talk) 12:28, 30 October 2024 (UTC)[reply]

@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. {{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. Jroberson108 (talk) 13:07, 30 October 2024 (UTC)[reply]
@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.
--Timeshifter (talk) 14:06, 30 October 2024 (UTC)[reply]
@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. Jroberson108 (talk) 18:03, 30 October 2024 (UTC)[reply]

Sticky headers mobile problem

[edit]

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. NakhlaMan (talk) 02:59, 18 March 2025 (UTC)[reply]

@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? Jroberson108 (talk) 05:49, 18 March 2025 (UTC)[reply]
In testing [1] 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. Jroberson108 (talk) 06:17, 18 March 2025 (UTC)[reply]
On mobile, the parent container <div id="mw-mf-page-center"> has an overflow: hidden; style applied to it, which makes this template not work. I'm still looking into it. Jroberson108 (talk) 07:11, 18 March 2025 (UTC)[reply]
Looks like the style was added to fix some issues per [2]: Without this the page actions and user dropdowns in advanced mobile mode or desktop mode will create a horizontal scrollbar. Jroberson108 (talk) 07:27, 18 March 2025 (UTC)[reply]
Mentioned at phab:T387768. Jroberson108 (talk) 21:07, 18 March 2025 (UTC)[reply]
@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). Jroberson108 (talk) 19:22, 19 March 2025 (UTC)[reply]

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

[edit]

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 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? --Timeshifter (talk) 03:11, 10 May 2025 (UTC)[reply]

The changes they made to Minerva causes it to not work at all. Jroberson108 (talk) 03:24, 10 May 2025 (UTC)[reply]
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".
--Timeshifter (talk) 03:34, 10 May 2025 (UTC)[reply]
I updated the Minerva info. I assumed {{sticky header}} is not working at all on your Android phone at any table width. I discovered that mobile sticky works fine with {{sticky table start}}. --Timeshifter (talk) 19:07, 12 May 2025 (UTC)[reply]
I encountered the same problem. On Android (e.g., in Chrome), {{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.
Miria~01 (talk) 12:35, 1 June 2025 (UTC)[reply]
@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? --Timeshifter (talk) 14:48, 1 June 2025 (UTC)[reply]
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.).
Regarding your question: the number of people using Minverva on desktop PCs is probably negligible. Miria~01 (talk) 15:14, 1 June 2025 (UTC)[reply]

Templates with implemented {{sticky header}}

[edit]

Hello, I would like to ask for your help or advice for a small problem. Template:Medals table has implented {{sticky header}} in their code (...local sticky = frame:extensionTag{ name = "templatestyles", args = {src = "template:sticky header/styles.css) 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 {{sticky table start}}. In 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
div style="overflow-y:auto; max-height: 50vh; max-width: max-content; font-size:90%". 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 {{sticky table start}} globally for all tables with the Template:Medals table? Miria~01 (talk) 12:08, 18 June 2025 (UTC)[reply]

@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. {{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 {{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 {{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 {{sticky table start/end}} or maybe add a template flag so editors can choose which sticky template to use. Jroberson108 (talk) 16:08, 18 June 2025 (UTC)[reply]
Thanks for the answer. Actually, I proposed implementing this for the template in August 2024 (before that, I was unaware of {{sticky table start}}. However, I saw that many users in other sport tables had switched from {{sticky table start}} to {{sticky-header}} and wanted to look for a custom solution first. I'll ask later whether there's a consensus to switch it at {{Medals table}}.
Can I ask what you mean by "add a template flag"? Do you mean an additional parameter in the {{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. Miria~01 (talk) 16:55, 18 June 2025 (UTC)[reply]
Just for your information, with these changes in {{Template:Medals table}}, this switch would work, tested with Module:Sandbox/Miria~01/2 on User:Miria~01/sandbox2 with {{#invoke:Sandbox/Miria~01/2|createTable|style=alt for the first table and for the second table with {{#invoke:Sandbox/Miria~01/2|createTable. These would be the changes in {{Module:Medals table}}
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
@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 {{sticky table start}} and {{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. Jroberson108 (talk) 18:54, 18 June 2025 (UTC)[reply]

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.--Timeshifter (talk) 16:12, 18 June 2025 (UTC)[reply]

thanks, I changed that directly. Miria~01 (talk) 16:27, 18 June 2025 (UTC)[reply]