Template talk:COVID-19 pandemic data/styles.css

New styles feedback

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Note: This talk section was moved from Template talk:COVID-19 pandemic data. Jroberson108 (talk) 13:14, 23 February 2022 (UTC)

Styles: Template:COVID-19 pandemic data/styles2.css ("position: sticky;" support)

Tables

• Template:COVID-19 pandemic data
• Template:Monthly cumulative COVID-19 death totals by country
• Template:COVID-19 pandemic death rates by country

Browsers tested and CSS status
(Y all works; N position sticky doesn't work)
Windows 10

• Y Chrome 97.0
• Y Edge 97.0
• Y Firefox 96.0

Android 12 (phone)

• Y Chrome 97.0
• Y Firefox Daylight 95.2

Amazon Fire (tablet)

• Y Amazon Silk

Mac OS X

• Y Firefox 96.0

iOS 15.3 (iPhone SE 2020)

• Y Chrome 97.0
• Y Edge 97.0
• Y Firefox Daylight 96.0
• Y Safari 15.3

---

I've been working on a new styles.css page for the COVID-19 tables and fixed quite a few issues, some of which have already been implemented. Some of the fixes:

• Fix a bunch of spacing and float issues.
• Fix Firefox missing borders.
• Support top sticky row (column headers) on mobile.
• Support left sticky column (row headers) on desktop and mobile.
• Support <thead> top sticky where sortable moves column headers and (after sort) "sorttop" row (desktop only, mobile not sortable).
• Fix row header accessibility issues by using <th scope="row"> (new module outputs scope on location) and style background color like <td>.
• Fix caption spacing issues (VTE and expand/collapse links moved above table, supports larger caption without weird spacing.
• Minimize sticky data and maximize scrollable data, useful on small screens (note, flag image moved to separate column to accomplish this).
• Remove separate sort row and allow sortable's sort buttons to appear under column header text, which is useful on wide tables with column headers wider than data (fixes blank sort row on mobile because mobile not sortable).

I've only done two pages thus far and would like some feedback before I continue with the rest.

• current | sandbox - Module:COVID-19 data
• current | sandbox - Template:COVID-19 pandemic data/styles.css
• current | sandbox - Template:COVID-19 pandemic data
• current | sandbox - Template:Monthly cumulative COVID-19 death totals by country

Everything seems to be working correctly on Windows 10 (Chrome, Firefox, Edge) and Android (Chrome, Firefox). Jroberson108 (talk) 05:20, 13 January 2022 (UTC)

Jroberson108. What are the 2 pages? --Timeshifter (talk) 13:44, 13 January 2022 (UTC)

See the "sandbox" links I provided. The first is a module, second is the CSS, and the last two are the template pages with a table of data. The last two would be the two pages I'm referring to. Jroberson108 (talk) 14:07, 13 January 2022 (UTC)

Jroberson108. Interesting. I am in Firefox on desktop PC in Windows 10 Pro. 27 inch monitor.

Concerning: Template:Monthly cumulative COVID-19 death totals by country/sandbox:

Looks like you solved the VTE and "expand/collapse" location problem. Thanks.

I like that you were able to use scope=row, and keep the background white.

"World" row is sticky for some reason. It shouldn't be. Maybe this has something to do with it:

Template talk:Monthly cumulative COVID-19 death totals by country#2020, 2021, and 2022 templates and sandboxes: "It is not possible to make the 'World' row into header cells. This messes up the scrolling of the template. The template is supposed to only make the first column header row sticky when scrolling."

I suggest using "Location" instead of "Country, area". It is shorter and prevents wrapping, and higher header height, at narrower window widths. And for some weird reason when I looked at it in preview using "Location" the "World" row stopped being sticky.

class="image" can be class=image

scope="row" can be scope=row

With 400 to 500 sets of quotes per country table this can save some kilobytes from having to load. Quotes are only necessary when there are blank spaces between the quotes.

--Timeshifter (talk) 17:51, 13 January 2022 (UTC)

@Timeshifter: "World" uses the "sorttop" class in the module. If it shouldn't, then it is easy to remove. For me it makes sense to be at the top since the rest are parts of the world and so "World" shouldn't be mixed in the sort. Let me know. "Country, area" is easy to change to "Location", which is general enough, understandable, and shorter. Regarding double quotes, the general practice is to add them. With one character being a byte, a few kilobytes isn't much, especially with the current speeds of broadband. They are required if the content is processed as XHTML or XML, which have stricter standards as opposed to a "loose" standard, so it is best practice to add them, which even browsers add any missing ones when inspecting source. Jroberson108 (talk) 19:04, 13 January 2022 (UTC)

Jroberson108. Yes, "World" should use the "sorttop" class in order to not sort.

But the "World" row shouldn't be sticky in Firefox.

This is weird. It is sticky only sometimes. I can't duplicate it. I saw it just now. But then it stopped again.

Concerning quotes: I have had this discussion many times with programmers. Wikitext is not XHTML, XML, HTML, etc.. Wiki markup has its own rules that incorporate aspects of other coding.

But you can feel free to keep the quotes if you want. But they are completely unnecessary in wiki markup. Both wikitext and HTML do not require quotes if there is no blank space between the quotes. I don't know about XML, XHTML, etc.. But as I said it does not matter what the rule is in XML or XHTML. --Timeshifter (talk) 19:59, 13 January 2022 (UTC)

@Timeshifter: I'm aware of what wikitext and HTML are. Also, if you CURL a Wikipedia page, the raw data shows that all unquoted and single quoted attribute values are served with double quotes, so the requester gets served the exact same data no matter what you do. The only difference is on Wikipedia's side where you can unquote to save a few kilobytes in storage and use extra CPU processing every time the page is served for it to add double quotes, or just add the double quotes to begin with, which I'm sure they cache the served content. It isn't an issue for Wikipedia or they would have stricter standards. Again, quotes aren't worth discussing when the reasons aren't noticeable. For the record, in HTML, an attribute value also requires quoting if any of these characters are present: " ' ` = < or >. I'm not sure if anyone has tested those extra characters out in wikitext?

Regarding sorting, after a sort, "sortable" moves the "sorttop" row to the "thead" element, which is why it was top sticky after a sort. I changed the "thead" element so it isn't top sticky. That makes it harder to add a second top sticky row. A style will have to be added restricting the first row to a certain height and force "nowrap", which isn't ideal. If "sortable" didn't move the "sorttop" row, then this would be easy. Jroberson108 (talk) 23:13, 13 January 2022 (UTC)

Jroberson108. I now use "Location" instead of "Country, area". With "Location" in the header there is now nothing in the yearly death templates that can wrap in the headers. So the header height remains the same. See COVID-19 pandemic deaths. I changed them all to "Location" after I noticed the header height increasing when the browser window was narrowed enough, and "Country, area" would wrap to 2 lines. That left less vertical height in the scrolling window for data rows.

The numbers in all of the 2021 and 2022 columns are wider than the headers like "Jan 1" etc.. And in the 2020 table there is no date. There is only the month. So no header wrapping.

I knew of the special characters " ' ` = < or > but most of the time I only remove the quotes for simple things such as:

class=wikitable
style=text-align:left
scope=row

This makes it easier for the average and newb Wikipedia editor. One of the reasons wiki markup was made was to make creating web pages easier. At least that is my understanding. I made some primitive web pages back in the day at Tripod, Angelfire, Geocities, etc.. Wikis are a lot easier. I have a couple wikis outside Wikimedia. You're right that once Wikimedia saves a page all is good. I had another brain fart earlier concerning that. No kilobytes are saved either way.

But ease of use matters. Once I learned that in many cases there was no need to use quotes that has saved me a lot of time. I notice more and more people are blowing off the quotes on style=text-align:left for aligning text in table columns. It makes it easier for people coming from the obsolete align=left method of aligning text in table columns. --Timeshifter (talk) 15:20, 14 January 2022 (UTC)

@Timeshifter: I can use JavaScript to remove some of the nowrap headaches, but, if I recall correctly, reading the height of row one to assign to row two's top value may not work properly on mobile. I'll have to test again. Do you know if the use of JavaScript on templates is discouraged or if it will be approved if I get it working? Regarding quotes, I personally find it easier to add them across the board (markup and programming languages + inline CSS) instead of having to remember minor instances where they are not required. Jroberson108 (talk) 16:04, 14 January 2022 (UTC)

@Jroberson108: I have no knowledge of JavaScript at all. Nor whether it is allowed on templates. Maybe you can use different templates, or template CSS pages, for one versus two header rows. Do as much as you can with just CSS. Then use separate pages to experiment with JS, etc.. Then ask at Wikipedia:Village pump (technical). Or start there before doing anything. --Timeshifter (talk) 17:21, 14 January 2022 (UTC)

I got it to work with CSS. Adding a second |- class="sticky-row" will restrict the height/nowrap for the first one and set the second's top so it sticks under the first. With only one "sticky-row", there is no height/nowrap restriction. Max two allowed. Tested everything again on all devices and browsers I mentioned above, both with and without sortable, and it all appears to be working perfectly. I hope no one wants a second left sticky column though. I think one is enough and big tables shouldn't be so complex. Jroberson108 (talk) 05:15, 15 January 2022 (UTC)

Just an update. I'm done modifying the module to include "scope" for row headers, use "image" class for flag cells, and fixed a few things. For templates that invoke the module, I've adjusted their current styles to accommodate the changes. For the new sandbox styles I was working on, I moved them to Template:COVID-19 pandemic data/styles2.css instead of replacing the current styles in case someone reverts my adding its usage on any of the templates since markup will also be modified. Since there is no more feedback, I'll start modifying the numerous COVID-19 templates, which use the old styles, different styles, or no styles. Jroberson108 (talk) 19:12, 15 January 2022 (UTC)

@Jroberson108: I looked at your sandbox pages in the iphone SE 2020. I don't see a sticky left column here:

Template:Monthly cumulative COVID-19 death totals by country/sandbox

In your new styles list: "Support left sticky column (row headers) on desktop and mobile."

Is there somewhere I can see that without having to install your CSS and JS? There must be somewhere in all the Wikimedia sites that allow developers to show their stuff directly without viewers having to install CSS and JS.

I vaguely remember there is a way to import CSS with a single line added to my user CSS. Same for JS.

I would do that. Because as you update your importable CSS page I wouldn't have to do anything other than ctrl-F5. Same for JS.

And I could comment it out when I don't need to see what it does.

--Timeshifter (talk) 01:35, 16 January 2022 (UTC)

@Timeshifter: I think it was @import. For example:

@import url('https://en.wikipedia.org/w/index.php?title=User:Tol/common.css&action=raw&ctype=text/css');

Tol (talk | contribs) @ 02:17, 16 January 2022 (UTC)

@Tol: Thanks. --Timeshifter (talk) 07:15, 16 January 2022 (UTC)

@Timeshifter: Sounds like you are talking about two different things? My sandbox pages under my user name and the COVID-19 sandbox page? For my sandbox pages, a CSS and JS import is required and I have two pages, one that is obsolete and a new one that isn't done and will probably take a different approach after working on the new styles for these pages. For Template:Monthly cumulative COVID-19 death totals by country/sandbox, you don't need to import anything and there is no JS. It should have a left sticky column and I'm not able to test it on iPhone since I use Android. Can you give more information? What browser and version are you using? Did you try another browser? If the column isn't left sticky, is the row top sticky or does sticky just not work at all in that browser? If it's Safari, for older browsers position: -webkit-sticky; can be added, but unfortunately Wikipedia has deemed it "invalid or unsupported" when I try to add it to the styles2.css page. Jroberson108 (talk) 03:32, 16 January 2022 (UTC)

@Jroberson108:. I looked at the 2 template sandbox pages (that you listed higher up) in the iphone SE 2020.

Template:COVID-19 pandemic data/sandbox

Template:Monthly cumulative COVID-19 death totals by country/sandbox

In Safari, Edge, Firefox, and Chrome. The scrolling tables were not sticky in any direction. Versions of the installed browsers according to each browser's settings:

Safari: 15.2.1 ("Your iOS version and Safari version are the same").

Edge: 96.0.1054.61

Firefox: Daylight 40.2 (7167)

Chrome: 97.0.4692.84

By the way, the CSS in here does not seem to remove table sticky headers:

User:Timeshifter/vector.css

It only removes the Wikipedia dropdown toolbar. Sticky headers remain on the desktop PC in the above-linked sandbox templates. Both horizontal and vertical sticky headers.

But I haven't seen any sticky headers on the iphone with or without the changes in User:Timeshifter/vector.css. I tested this by removing my user CSS. Then I removed the cache of all the browsers. And then I retested the templates. Still no sticky headers of any kind. Since then I have kept my user CSS empty to avoid any possibility of problems testing your future changes.

--Timeshifter (talk) 09:03, 16 January 2022 (UTC)

@Timeshifter: Regarding your vector.css, common.css, and common.js settings, I don't see anything in them that would interfere, and an easy way to disable it all is to test while logged out. Regarding your tests, can you clarify which are desktop and which are iPhone, also is it all Mac and iPhone or are you using Windows? Since you mentioned Safari, which the current version is only available for Mac, and Edge, which is available for Mac, I assume you are using Mac and iPhone? Review the summary list below. According to documentation, Safari 13 (released Sep. 20, 2019) and newer versions offer full support for position: sticky;.[1] Jroberson108 (talk) 18:06, 16 January 2022 (UTC)

@Jroberson108:. My desktops are PCs. Both are Windows 10 Pro. I don't have a Mac. I do have an ipad, but I don't use it much, since I need to figure it out more. Phone is iphone SE 2020. I am figuring it out due to our discussions. :)

I just redid tests for all 4 browsers on the iphone. No sticky headers on the side or top of the tables. This time I made sure I was logged out of Wikipedia for all the tests. I filled in the list below with the results.

On the PC in Firefox I do see sticky headers on the side and top of tables. I don't remember looking at the other browsers on the desktop since I believe you have a desktop PC, and can do those tests.

--Timeshifter (talk) 19:46, 16 January 2022 (UTC)

@Timeshifter: I am using Windows 10 Home on desktop. It not working on any of your iPhone browsers is quite strange. Can you test this page?. In the "CSS Demo: position" section, select the fourth box, which has the following styles:position: -webkit-sticky; position: sticky; top: 20px;. Test it by scrolling down in the right box next to it and see if the yellow square sticks to the top. If that works, try removing position: -webkit-sticky; and test again. There is a "Reset" button to start over. Jroberson108 (talk) 20:13, 16 January 2022 (UTC)

I added one more test page for the "static row numbers" template. I will fix the missing border for the blank row number next to "World". Jroberson108 (talk) 21:13, 16 January 2022 (UTC)

I finished fixing border and top-sticky style issues for "static row numbers" and tested Template:COVID-19 pandemic death rates by country/sandbox on all the Windows and Android browsers listed below. I don't see anymore issues. Jroberson108 (talk) 23:07, 16 January 2022 (UTC)

@Jroberson108: position: -webkit-sticky; worked for all browsers on my iphone.

When I deleted only -webkit-sticky; the yellow box was no longer sticky.

But when I also deleted position: the yellow box was still sticky.

So I had to delete that whole line: position: -webkit-sticky;

I guess that makes sense because there was no closing semi-colon.

Google search for CSS position:sticky on iphones pulls up various problems and solutions. For example,

https://stackoverflow.com/questions/54646939/why-is-my-positionsticky-not-working-on-ios

https://stackoverflow.com/questions/48861386/css-positioning-not-working-on-ios-iphone

--Timeshifter (talk) 01:48, 17 January 2022 (UTC)

@Timeshifter: Yeah, the whole line has to be deleted or it will be malformed. So, you weren't clear on the test results. After deleting that line so only position: sticky; top: 20px; remained, did top-sticky work in all browsers? Some of the pages you linked to mentioned adding "position: relative;" to any elements that wrap the "position: sticky;" elements to make it work for iOS. The test page also did that. I applied that change to the sandbox pages. My tests of sticky still work for Windows and Android. Can you test the sandbox pages again on iPhone? Jroberson108 (talk) 03:53, 17 January 2022 (UTC)

@Jroberson108: On the iphone I checked all 4 browsers after deleting the cache for each one. I also reloaded the 3 template pages on each browser before playing in the scroll window. No luck. Still no sticky on the top or the side. --Timeshifter (talk) 04:52, 17 January 2022 (UTC)

@Timeshifter: What about the test page? Did it work in all browsers when the line was deleted? Jroberson108 (talk) 05:01, 17 January 2022 (UTC)

@Jroberson108: Yes. The test page was sticky in all 4 browsers before and after deleting the whole line:

position: -webkit-sticky;

https://developer.mozilla.org/en-US/docs/Web/CSS/position

--Timeshifter (talk) 05:33, 17 January 2022 (UTC)

@Timeshifter: That at least establishes that "position: -webkit-sticky;" isn't required, which Wikipedia won't allow that line. Unfortunately, I've tried all that I can and am debugging blind without an actual iPhone in my hands. The only option I can think of is we find a table with sticky top headers that works, then we try to duplicate it in Wikipedia. The "th" need to be top-sticky, not the "thead" or "tr". In that process we have to establish what is needed outside of Wikipedia and that Wikipedia isn't interfering (overriding) the styles for iPhone. Jroberson108 (talk) 10:49, 17 January 2022 (UTC)

I moved some elements around. You can test to see if that works on all three, which each one is slightly different. Jroberson108 (talk) 11:39, 17 January 2022 (UTC)

@Jroberson108: I tried all 3 again on all 4 browsers on the iphone. Cleared caches beforehand. And reloaded pages. No sticky headers to left or top. --Timeshifter (talk) 13:08, 17 January 2022 (UTC)

@Timeshifter: I am moving the testing to User:Jroberson108/table-sticky-headers-ios. I'm going to have to start from scratch for iOS and build up to these tables to see what fails. I'm starting with the box test that you said worked. Will continue conversations on that page's talk page. Jroberson108 (talk) 19:09, 17 January 2022 (UTC)

@Tol: Do you know of anyone with an iPhone or Mac computer that can test if sticky works on the sandbox templates? Timeshifter and I haven't found a solution. At least verifying the issue isn't local to his iPhone helps. I don't have an iPhone or any Apple products, which makes this difficult for me to debug. Jroberson108 (talk) 16:04, 20 January 2022 (UTC)

@Jroberson108: I'm sorry, but I live in an Apple-free household. I'm guessing the problems are with Safari (or Blink), not with Apple products in general. On iOS, I'm pretty sure everything has to use Blink, but Chrome on Mac OS doesn't. If someone could test if Chrome on Mac OS works, we might be able to figure out if it's due to Blink. Tol (talk | contribs) @ 20:29, 20 January 2022 (UTC)

@Tol: I did a quick search and it says Chrome uses WebKit engine on iOS. The oddest thing is sticky table column headers work on all his browsers if it's not on Wikipedia. Several pages were found to work. But in reproducing them within Wikipedia, it never worked on all browsers. He tested while logged out so no custom Wikipedia css/js interfering. I have looked for any styling that differs for the iPhone user agent and the small viewport, but only found a general style at 720px width that changes table and caption display, which have been reverted in the tests and styles2.css. If a second iPhone can replicate the issue, then I can rule out anything local. It may be some of the shared styles being interpreted weirdly by the WebKit engine? If there is any custom styles for iPhone, I cannot detect it. Jroberson108 (talk) 21:11, 20 January 2022 (UTC)

Ah; I confused Blink with WebKit. My bad. I don't really have any ideas; I'm not a web designer, haha. It might be WebKit; if you can isolate which specific CSS doesn't work then you could check Mozilla's CSS docs, which show CSS compatibility with different browsers. Tol (talk | contribs) @ 21:14, 20 January 2022 (UTC)

Forgot to mention that we got it working on Wikipedia with a box (div), but it never worked with table col/row headers. Yeah, I looked at compatibility already. Jroberson108 (talk) 21:18, 20 January 2022 (UTC)

Technical issue opened at Wikipedia:Village pump (technical)/Archive 194#Sticky table headers not working on iPhone. Jroberson108 (talk) 16:12, 22 January 2022 (UTC)

Someone was finally able to test with an iPhone (iOS 15.2) and confirmed the headers aren't sticky. Seeing if anyone can help identify the problem. Jroberson108 (talk) 03:31, 25 January 2022 (UTC)

Jroberson108. You might also ask at Wikipedia:Reference desk. I asked some very technical questions there and they got answered. Look up "Timeshifter" in the archive there. I link to one of the answers from Help:Table.

I suggest considering creating a specific user sandbox explaining the problem. Versus sending them to this monster of a thread. :) --Timeshifter (talk) 09:29, 27 January 2022 (UTC)

@Timeshifter: TheDJ applied a fix for mobile. I've retested my browsers on Windows and Android and everything still works for me. Can you retest Template:Monthly_cumulative_COVID-19_death_totals_by_country_2021 on your four iPhone browsers to see if it works now? Jroberson108 (talk) 14:28, 30 January 2022 (UTC)

Jroberson108. Both row and column headers are sticky on all 4 browsers (Safari, Edge, Chrome, Firefox) on my iPhone SE 2020. So far I have tested on these pages:

Template:2020 monthly cumulative COVID-19 death totals by country

Template:2021 monthly cumulative COVID-19 death totals by country

Template:COVID-19 pandemic death rates/sandbox

I have consolidated more links here:

User:Timeshifter/Sandbox169

--Timeshifter (talk) 16:48, 30 January 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

VTE and expand/collapse. Please keep both visible

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I sometimes want to expand the table, but can't quickly find the expand/collapse button because I have scrolled way down into the scrolling table. Then I have to scroll tediously all the way back up before the expand/collapse button is uncovered.

It is not visible just by moving the whole page to get above the table. I have to scroll within the table first. This is time-consuming, annoying and unintuitive.

Same is true for the VTE links. I sometimes want to look at the wikitext but I am deep in the scroll window. --Timeshifter (talk) 17:02, 1 February 2022 (UTC)

@Timeshifter: It sounds like you are asking if the VTE and expand/collapse links can be moved above/outside the scrollable div. VTE links can be moved anywhere or even omitted since they don't interact with other elements. The expand/collapse links interact with both the scrollable div (to remove height restriction so no scroll) and their counter part collapse/expand links (hide opposite link), so those links need to stay in the div that has both the "covid19-wrapper" class and the targeted id. This is how it also works on the old styles, where the links are inside the scrollable div. The only difference from the old styles is that the links were moved outside the caption and above the table (still inside the scrollable div) while being left aligned for the highest visibility when first viewed. The notes were also below them to increase the links' first-time visibility with the exception of the notes that you relocated above them. With the related Help:Collapsing behavior, which is what the behavior is probably based on, if you apply it to a long table without the sticky scroll behavior, you would still have to use scroll (browser's scroll) to find the "hide" link. Because this same necessity to scroll back up is found elsewhere, it seems acceptable to me. Jroberson108 (talk) 23:35, 1 February 2022 (UTC)

Jroberson108. Editors, for the most part, are the only ones who would want access to the VTE links.

I was more concerned with more accessibility to the expand/collapse links. But since they can't be moved outside the scrollable div I guess there is nothing that can be done.

So we might as well conserve space and keep the VTE links and expand/collapse on the same line. Versus moving the VTE links above it all. That would only help a few editors. --Timeshifter (talk) 14:39, 3 February 2022 (UTC)

@Timeshifter: I restructured the styles and the related markup on all live templates to accommodate moving the expand/collapse links outside the scrollable div. Please note that the "covid19-wrapper" class was renamed to "covid19-container" and contains all other classes and content. No related content should be outside/above it. The "id", "aria-label", "role", and "tabindex" attributes should remain on the "covid19-container" div. A new "scroll-container" class was added to contain the scrollable content. Jroberson108 (talk) 00:47, 5 February 2022 (UTC)

Jroberson108. Thanks! Looks good. I moved up VTE and expand/collapse above the "scroll-container" class here:

Template:2022 first half. Monthly cumulative COVID-19 death totals by country

I tested it in all 4 browsers (Safari, Edge, Chrome, Firefox) on my iphone SE 2020. It is working fine.

--Timeshifter (talk) 13:34, 5 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

Sticky headers don't work when scrolling table is expanded

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

• Template:2020 monthly cumulative COVID-19 death totals by country

Can this be fixed? --Timeshifter (talk) 17:10, 1 February 2022 (UTC)

@Timeshifter: No, the height restriction is required for it to be sticky, which is counter to the expand behavior. The height and overflow are what creates the scroll. Jroberson108 (talk) 22:26, 1 February 2022 (UTC)

Jroberson108. Out of curiosity are there any long and wide non-scrolling tables anywhere that have sticky top and side headers? Using whatever they need in the way of JS and CSS. Can you link to some examples?

And is there any reason Wikimedia couldn't add that ability into their software? --Timeshifter (talk) 23:25, 1 February 2022 (UTC)

@Timeshifter: I haven't gone through the process of adding code to Wikimedia's "software" yet. I know that there is a git repository for managing the code and a process to discuss, test/fix, and commit changes. Yes CSS and JavaScript can be added to that repository. As far as getting sticky to work without scroll, you wouldn't use sticky if you didn't have something that needs scrolling because sticky takes effect when the sticky element is scrolled to the edge of its container with the edge defined by the top/right/bottom/left setting(s). Basically, it needs to have something to stick to and an action to move it to the defined edge of what it should stick to, which is what the scrollable div wrapper provides. You can read more here: position. Jroberson108 (talk) 00:11, 2 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

Sticky gadget

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

There is a Wikipedia gadget in gadget preferences that adds sticky column headers to all tables: Special:Preferences#mw-prefsection-gadgets Search for "sticky" to find: "Make headers of tables display as long as the table is in view, i.e. 'sticky' (requires Chrome v91+, Firefox v59+, or Safari)" Unfortunately, it doesn't do sticky side headers. That would be helpful in tablets, and smaller notebooks. Here is a page to test it on: List of U.S. states and territories by incarceration and correctional supervision rate In desktop view while on my iphone the gadget makes the column headers sticky. In mobile view while on my iphone the gadget does not make those column headers sticky. --Timeshifter (talk) 03:33, 2 February 2022 (UTC)

@Timeshifter: Yeah, I've looked at it. You should be aware that it makes <thead> top sticky as opposed to targeting specific rows, so the "sorttop" row will also be top sticky (may have to sort first?), something we both were against in another discussion. One of my main issues with implementing it through a gadget, which I read somewhere, is that gadgets are only used by maybe 1% or a small percentage of Wikipedia's readers. It does require you to register and be aware of the gadgets, so that statistic is understandable. Jroberson108 (talk) 04:34, 2 February 2022 (UTC)

Jroberson108. I removed the sorttop class, etc. from the "World" line in the 2022 template. Weird jerkiness was occurring due to interference from the gadget. When I turned off the gadget things were fine. So since some people, myself included, want to use the gadget I removed the sorttop class, etc.. See diff.

If you can help make the gadget better, then more and more people will clamor for action on sticky headers as something to be implemented by default. Some gadgets do become default over time. --Timeshifter (talk) 15:41, 2 February 2022 (UTC)

@Timeshifter: It's kind of a this or that situation, not both. I wouldn't remove sorttop to accommodate a gadget that some consider experimental, very few readers use, doesn't work on mobile, and doesn't offer other features like sticky row headers. The gadget takes a different generalized approach. I can try to disable these styles when the gadget is enabled. Jroberson108 (talk) 21:17, 2 February 2022 (UTC)

@Timeshifter: I reversed the gadget's general styles on tables that use these more specific styles, so when the gadget is enabled it shouldn't interfere anymore. Jroberson108 (talk) 01:06, 3 February 2022 (UTC)

Jroberson108. Thanks! I reverted my change to Template:2022 first half. Monthly cumulative COVID-19 death totals by country. It looks like you solved the problem. I see no jerkiness or weirdness happening now after my reversion. And I have the gadget enabled.

Can you fix the lack of internal header borders on Firefox in the sticky headers produced by the gadget?

And would it possible to add sticky row headers to the gadget?

I don't think the original author of the gadget will care what you do as long as it's an improvement in the results. Even if you have to completely rewrite it.

MediaWiki:Gadget-StickyTableHeaders.js and MediaWiki:Gadget-StickyTableHeaders.css

Special:Preferences#mw-prefsection-gadgets.

--Timeshifter (talk) 01:53, 3 February 2022 (UTC)

@Timeshifter: Um? I only changed the new styles and the 2022 table doesn't use the new styles yet, so ...?

I don't have any plans to modify the gadget because it's experimental and too general for my tastes. The nature of a gadget is to apply changes in a general manner to all tables regardless of size or necessity. As the comments in its styles indicate, there are issues and some of it may not work, so the developer(s) are aware. I wouldn't recommend making row headers left sticky on all tables through a gadget or otherwise. There is a possibility that a sticky row of column headers or column of row headers could fill up the entire screen on small devices, not allowing for any scrollable data to be seen, so the "Expand" feature is needed so the user can remove sticky in those cases. Example: nowrap used on lengthy row headers fills up the screen on small devices. I understand the gadget doesn't work on mobile, and it might be for the best that it doesn't in cases where there are four or five rows of top-sticky column headers, which would dominate a small screen's real estate, especially in landscape mode, with no way to disable it except through preferences. Jroberson108 (talk) 02:48, 3 February 2022 (UTC)

Jroberson108. OK. I see that you just changed the 2022 table to use the new styles:

• Template:COVID-19 pandemic data/styles2.css

But the flakiness at the top of the 2022 table disappeared before that. I don't know why.

You could still improve the gadget's use on desktop. For example, do you see a way to return internal borders on the column headers on Firefox?

The gadget doesn't seem to be working on mobile. And from what you are saying it shouldn't do so on tables with more than a couple lines of text in the column headers. Could that be coded into a future gadget when it works on mobile? Maybe the sticky column headers disappear on mobile when they take up more than 30% of the vertical screen space.

Nowrap in any form shouldn't be used in headers. I remove it whenever possible when I see it. There is almost always a way to do without it. Nowrap shouldn't be used at all anywhere in tables if at all possible.

Row headers are wrapping in both the gadget and in the scrollable tables. I just tested this by narrowing the browser window in my desktop PC. So I don't foresee a problem of sticky row headers taking up all the screen space on mobile, tablet, notebook, or desktop unless nowrap is used. And as I said nowrap should not be used. --Timeshifter (talk) 10:51, 3 February 2022 (UTC)

@Timeshifter: Again, I don't have any plans to work on the gadget. I suggest talking with those developers on the gadget's talk page since they will be more familiar with its issues.

The fact that there is a "nowrap" class means it is allowed, and I had to use it in one or two wide tables for really small row headers that had a space and looked awful when wrapped. These styles use nowrap on the first sticky row if a second sticky row also exists because you can't make the second stick under the first unless you have a set height unless JS is used. I wouldn't take a hard stance against nowrap unless there is a policy forbidding it. And yes incorrect usage is possible, which is why I mentioned the possibility of it dominating small screens. The same goes for having too many rows of column headers, which may have legitimate use cases. Unfortunately, most people probably don't test there tables on mobile, and more likely without that gadget, so they may be unaware of any issues they are creating. Jroberson108 (talk) 11:28, 3 February 2022 (UTC)

Jroberson108. The gadget does not work on mobile. But it may in the future. Maybe it can be coded to not work when the column header takes up more than say, 30% of the vertical height of the screen.

I find that {{nowrap}} is mainly useful where 2 words absolutely must be connected. The template doc says what I am saying: "Use this template sparingly." And it gives several examples.

Can you link to the tables where you had to use nowrap in a scrolling table? I want to see exactly what you are talking about.

I will have to see what I can do with the multi-row headers here:

List of U.S. states and territories by incarceration and correctional supervision rate

I can break up some of the tables. And I can put some of the header info in notes above the tables. We had to do that here:

List of countries by wealth per adult#By country

Here is how it used to be:

Country or subnational area	Median wealth per adult (USD)	Mean wealth per adult (USD)	Adult population
Democratic Republic of the Congo	382	1,084	37,100,000
Mozambique	352	880	13,814,000

--Timeshifter (talk) 12:00, 3 February 2022 (UTC)

@Timeshifter: I'm not talking about the nowrap template, but the class. In essence, the template emulates the same style. Sparingly isn't the same as never, which I agree with sparingly. I don't recall which tables exactly, it was a while back. I just remember the "why" I needed to use the class. The first table you linked to is a prime example of four and five rows of column headers that, if sticky, take up the majority of a phone's landscape real estate. If I recall, table help recommends having a simpler structure of headers for the sake of accessibility. Jroberson108 (talk) 12:31, 3 February 2022 (UTC)

See: Help:Table#Width. That may be what you are recalling. My understanding is that multi-line headers are fine as long as breaks are not used. As in the example in Help:Table. It uses max-width instead. So the screen reader does not hear a break.

I believe the accessibility problem may be multiple header rows. They have to use colspan and that may confuse people with screen readers. Not sure.

Laddering in headers caused by a narrow screen is not a problem for screen readers, I believe. Because the screen reader does not perceive a break. --Timeshifter (talk) 12:48, 3 February 2022 (UTC)

@Timeshifter: This discussion is way off topic, so I'm going to end it here since I already fixed the interfering styles from the gadget. If you need help improving a specific table, you can ping me on that page's talk for ideas. This way other interested users can also participate. Jroberson108 (talk) 13:06, 3 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

2 sticky header rows

Jroberson108. OK. I am getting back on to the topic of styles2.css

You wrote: "The fact that there is a 'nowrap' class means it is allowed, and I had to use it in one or two wide tables for really small row headers that had a space and looked awful when wrapped. These styles use nowrap on the first sticky row if a second sticky row also exists because you can't make the second stick under the first unless you have a set height unless JS is used."

I have a list of scrolling templates I have tested in the iPhone SE 2020. See the relevant section at the end here:

• User:Timeshifter/Sandbox169

I see that none use 2 rows. I also noticed that wrapping of header text in a single header row due to narrow screens does not break anything when viewing those tables on my iphone.

I think I understand what you are talking about now concerning the need for a set height for the first row if there is a second row.

The gadget has a JS component. But I can discuss that further on the gadget's talk page. The only talk page I have found so far is this:

• MediaWiki talk:Gadget-StickyTableHeaders.css

Do you have any examples of scrolling tables with 2-row headers that I can look at that use styles2.css? I want to understand exactly what is being done in the table and in styles2.css --Timeshifter (talk) 13:43, 3 February 2022 (UTC)

@Timeshifter: No, thus far all the tables only have one sticky row. Jroberson108 (talk) 14:22, 3 February 2022 (UTC)

Is it possible to remove blank line between VTE line and caption?

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Jroberson108. If this were done there would be more perceived space on cell phones, and less confusion when scrolling, and when placing the table on cell phones. At least on my iphone SE 2020. See:

• User:Timeshifter/Sandbox169#Scrolling tables with iPhone fixes implemented and tested on an iPhone

All of those Covid templates in that section have that blank line. --Timeshifter (talk) 16:29, 4 February 2022 (UTC)

@Timeshifter: You can remove wikitable's top margin by adding style="margin-top: 0;" to the table. Jroberson108 (talk) 16:32, 4 February 2022 (UTC)

Jroberson108. Thanks! It is working fine in all 4 browsers (Safari, Edge, Chrome, Firefox) on my iphone SE 2020 on this page:

Template:2022 first half. Monthly cumulative COVID-19 death totals by country.

--Timeshifter (talk) 13:39, 5 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

Update automated US templates

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

@EphemeralErrata: I'm not sure if you are aware, but new styles have been developed (Template:COVID-19_pandemic_data/styles2.css) to replace the old styles at Template:COVID-19_pandemic_data/styles.css. The new styles provide support for mobile and left sticky row headers when scrolling, including other features. All templates that use the old styles have been updated except the automated ones you manage. I applied the new styles to a copy of the Texas template at Template:COVID-19 pandemic data/Texas medical cases by county/sandbox. Can you update the Texas template and the other templates you manage that use the old styles? Let me know if you have any issues with the new markup and/or styles.

These are the automated templates I found that use the old styles:

• Template:COVID-19 pandemic data/Arizona medical cases by county
• Template:COVID-19 pandemic data/Arkansas medical cases by county
• Template:COVID-19 pandemic data/California medical cases by county
• Template:COVID-19 pandemic data/Colorado medical cases by county
• Template:COVID-19 pandemic data/Idaho medical cases by county
• Template:COVID-19 pandemic data/Iowa medical cases by county
• Template:COVID-19 pandemic data/Kansas medical cases by county
• Template:COVID-19 pandemic data/Maine medical cases by county
• Template:COVID-19 pandemic data/Minnesota medical cases by county
• Template:COVID-19 pandemic data/Missouri medical cases by county
• Template:COVID-19 pandemic data/Montana medical cases by county
• Template:COVID-19 pandemic data/Nebraska medical cases by county
• Template:COVID-19 pandemic data/Nevada medical cases by county
• Template:COVID-19 pandemic data/New Hampshire medical cases by county
• Template:COVID-19 pandemic data/New Mexico medical cases by county
• Template:COVID-19 pandemic data/North Dakota medical cases by county
• Template:COVID-19 pandemic data/Oklahoma medical cases by county
• Template:COVID-19 pandemic data/Oregon medical cases by county
• Template:COVID-19 pandemic data/South Dakota medical cases by county
• Template:COVID-19 pandemic data/Texas medical cases by county
• Template:COVID-19 pandemic data/Utah medical cases by county
• Template:COVID-19 pandemic data/Vermont medical cases by county
• Template:COVID-19 pandemic data/Washington (state) medical cases by county
• Template:COVID-19 pandemic data/Wyoming medical cases by county

Jroberson108 (talk) 01:13, 12 February 2022 (UTC)

Done. The only issues: Utah has some ugly wrapping of header cells when collapsed. Minnesota has one county name wrap when collapsed. Oklahoma and Oregon have ugly footer wrapping when collapsed. These two are the narrowest tables. I could fix these by adding a br at a nicer wrapping point. BTW, the machine generated portion is div through /div allowing some of the wrapper to be edited without edit crashes. EphemeralErrata (talk) 09:43, 12 February 2022 (UTC)

@EphemeralErrata: So far all the tables scroll with sticky headers and expand/collapse correctly on my desktop browser tests. I'll take a look at the pages you identified. Jroberson108 (talk) 12:03, 12 February 2022 (UTC)

@EphemeralErrata: Regarding Kansas, "resize|" is displayed in the footnote. Jroberson108 (talk) 12:14, 12 February 2022 (UTC)

Fixed. EphemeralErrata (talk) 14:33, 12 February 2022 (UTC)

 Verified fix. Jroberson108 (talk) 05:12, 15 February 2022 (UTC)

@EphemeralErrata: Regarding Minnesota, it seems to be an issue with borders not appearing in some places, something that is an issue in Firefox and I attempted to fix which unfortunately has to apply to all browsers. I will have to take another look at fixing borders. When I use the "plainrowheaders" and "plainrowheadersbg" classes and hover over the cells with my mouse, the borders come back. For Oklahoma and Oregon, I would recommend the same as you, use "br" as you see fit. Just remember to check it on mobile so you don't have any weird wrapping. Regarding Utah, the header cells shouldn't be used on the data. I notice they are empty, but don't use "-". Is there any reason they are treated differently? I would also remove the "rowspan" since sorting will remove the span anyways. Jroberson108 (talk) 12:26, 12 February 2022 (UTC)

You're asking about Utah's empty cells grayed out with the bang? That was my way of blocking out not-applicable cells. For example, Bear River is not a county, and Box Elder is not a district. Would setting the background color to eaecf0 be an alternate solution? The row span keeps dividing lines from appearing in the gray - and yes I know they show up after sorting. EphemeralErrata (talk) 14:33, 12 February 2022 (UTC)

Yes, switching to "td" and using background-color on cell would work. Jroberson108 (talk) 15:04, 12 February 2022 (UTC)

@EphemeralErrata: For Utah, looks like Central Utah - Juab still uses headers on the data. For Oklahoma and Oregon, I didn't see any "br" changes so I'll assume you are fine with how they are. Minnesota borders still needs my attention. Jroberson108 (talk) 05:12, 15 February 2022 (UTC)

Central Utah will be fixed in today's upload. For orphaned words in OK and OR I found a better fix: nbsp. The same solution also prevents wrapping of some multi word county names in collapsed mode. EphemeralErrata (talk) 13:51, 15 February 2022 (UTC)

In Oregon, I see Template:Nowrap used instead of  , which either one should work. Jroberson108 (talk) 15:07, 15 February 2022 (UTC)

 Verified fix for Utah. You can adjust "br", "nbsp", and/or "nowrap" as needed. I'll continue the Minnesota borders discussion below (see Missing borders on sticky row headers). Jroberson108 (talk) 14:24, 16 February 2022 (UTC)

For Nevada, Utah, and Washington (state), I would remove the rowspan from the "Ref" column header and leave a blank cell in the "sorttop" row. When scrolling, the row of column headers is sticky and the "sorttop" row isn't, which gives a weird behavior. Jroberson108 (talk) 12:32, 12 February 2022 (UTC)

Done. I'll let these changes roll out with Monday's update. EphemeralErrata (talk) 14:33, 12 February 2022 (UTC)

 Verified fixes. Jroberson108 (talk) 05:12, 15 February 2022 (UTC)

Regarding your comment on machine generated portion is div. There are two main divs, so I assume you are referring to the one with class="covid19-container", so basically you are saying everything outside of that div is manual? Jroberson108 (talk) 12:54, 12 February 2022 (UTC)

It used to be the one and only div. Now it is the outer one - to simplify getting the preamble into all the templates. I'll probably change it to the inner scroll container div. The spreadsheet generated blob gets pasted in while everything outside of it remains unchanged. EphemeralErrata (talk) 14:33, 12 February 2022 (UTC)

@EphemeralErrata: To reduce "edit crashes" due to manual edits, an HTML comment could be added just above the div. Something like <!-- Below div automatically generated, don't modify -->. Keeping the HTML indentation might help editors to see where the div ends or an "end" version of the same HTML comment could also be added. Jroberson108 (talk) 23:08, 13 February 2022 (UTC)

@EphemeralErrata: Is this something you want to do? Jroberson108 (talk) 05:18, 17 February 2022 (UTC)

No. I use my watch list and the template history to detect when others have edited. This is working. EphemeralErrata (talk) 05:36, 17 February 2022 (UTC)

 No changes. Jroberson108 (talk) 07:41, 17 February 2022 (UTC)

I noticed you made all the "sorttop" cells headers. Only the first cell should be a header for the row. See my last edit on Texas/sandbox on moving the bold to the row style. Jroberson108 (talk) 13:58, 12 February 2022 (UTC)

I'll roll this out as part of regular updates. EphemeralErrata (talk) 17:34, 12 February 2022 (UTC)

Looks like the fix showed up on tables that were automatically updated. I'll check back on these later: Iowa, Kansas, Maine, New Hampshire, Oklahoma, Vermont. Jroberson108 (talk) 05:12, 15 February 2022 (UTC)

NH may have had a holiday, so no update. The rest I only update on Wednesdays. BTW, the markup is automatically generated, but manually pasted. EphemeralErrata (talk) 13:51, 15 February 2022 (UTC)

@EphemeralErrata: Wow, manually pasted is cumbersome; hats off to your diligent efforts. FYI, there are COVID-19 tables by country (e.g. Template:COVID-19 pandemic data) where the templates' data is included from a module, which pulls from JSON data that a bot automatically imports (more info: Template_talk:COVID-19_pandemic_data#Sticky_row_headers). If you are interested, you could discuss it with User:Tol, its creator, to see if something could be setup for US states. Jroberson108 (talk) 15:07, 15 February 2022 (UTC)

@EphemeralErrata & @Jroberson108: I don't think this would be possible with the current setup. Tol (talk | contribs) @ 18:25, 15 February 2022 (UTC)

 Verified fixes for removing header markup from "sorttop" row's data cells and moving bold styling to row. Jroberson108 (talk) 05:13, 17 February 2022 (UTC)

On Washington (state), the navbar (VTE) links are wrong and go to a redirect page. Mobile tests look good as far as functionality goes. I did find a weird quirk on the mobile site where "sortbottom" can scroll above the top-sticky headers. I'll have to take a closer look at that. I guess that's it for today. Sorry for the bulky responses. Jroberson108 (talk) 14:25, 12 February 2022 (UTC)

Washington is fixed. EphemeralErrata (talk) 14:59, 12 February 2022 (UTC)

"sortbottom" quirk is fixed. Jroberson108 (talk) 00:56, 13 February 2022 (UTC)

 Verified fixes. Jroberson108 (talk) 05:12, 15 February 2022 (UTC)

I checked the print version just for Texas and noticed the "Edit with VisualEditor" text. Since the data in these templates are automated, it seems like you could remove the "VEFriendly" template unless you see a use for it. Jroberson108 (talk) 01:20, 13 February 2022 (UTC)

@EphemeralErrata: Is this something you want to do? Jroberson108 (talk) 05:18, 17 February 2022 (UTC)

No. If someone else needs to edit, they may prefer the visual editor. EphemeralErrata (talk) 05:36, 17 February 2022 (UTC)

 No changes. Jroberson108 (talk) 07:41, 17 February 2022 (UTC)

@EphemeralErrata: I had to move the "sortunder" class from the row to the table. Can you do the same? See my last change on Texas/Sandbox. FYI, the old row styling will continue to work until these tables are updated. Jroberson108 (talk) 19:56, 15 February 2022 (UTC)

 Verified fix. Also, old row styling will no longer work. Jroberson108 (talk) 05:13, 17 February 2022 (UTC)

I assume historical revisions will still render well enough to show their data? EphemeralErrata (talk) 05:36, 17 February 2022 (UTC)

Yes. Jroberson108 (talk) 07:41, 17 February 2022 (UTC)

Add these two to the QC list:

• Template:COVID-19 pandemic data/Arkansas medical cases by county
• Template:COVID-19 pandemic data/Missouri medical cases by county

EphemeralErrata (talk) 16:35, 16 February 2022 (UTC)

 Added and I don't see any issues with their markup. Jroberson108 (talk) 17:29, 16 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

class=sortunder

Note. This talk section was moved to Template talk:Import-blanktable. --Timeshifter (talk) 15:57, 15 February 2022 (UTC)

Missing borders on sticky row headers

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Main page: Template:COVID-19 pandemic data/Minnesota medical cases by county

Note: Discussion split from Update automated US templates.

@EphemeralErrata: Continuing discussion of the Minnesota borders issue here so I can mark the other tasks done, which I also found the issue occurs in Colorado and nine other tables. Firstly, what we are calling borders are actually shadows applied to the edge of the cells to look like borders, which was an attempt at fixing missing Firefox borders. Secondly, the behavior I am experiencing on Minnesota is that the borders display fine in Windows Firefox. In Windows Chrome and Edge, borders are missing between two left-sticky row headers every five rows from the first occurrence, which the occurrences change if I reduce my browser's width and reload. There are no border issues if I scroll the missing borders out of view and back again, expand the layout, collapse the layout, or reduce my browser's width considerably without reload (sporadic), so it appears to be a rendering issue on page load. Sorry if the explanation is too technical. I found removing the table's font-size: 85%; fixed the issue and setting it to "99%" or "101%" did not. Is the font size reduction needed? If so, then I might have to change how the Firefox borders are fixed or apply the font size reduction directly to the cells through a table class. Jroberson108 (talk) 14:24, 16 February 2022 (UTC)

When font-size: 85%; is present, I found removing the "sortable" class fixed the border issues, so I will have to take a closer look. Jroberson108 (talk) 14:57, 16 February 2022 (UTC)

It appears the borders issue is caused from the combination of reducing the table's font size (font-size: 85%;), making the "County" column's row headers left-sticky using "sticky-col1" (specifically left: -1px; position: sticky;) and moving the column headers' sort buttons under their text using "sortunder" (specifically padding-bottom: 1em;). The latter shifts the rest of the table's content down by adding padding. Jroberson108 (talk) 17:29, 16 February 2022 (UTC)

@EphemeralErrata:The only fix I can think of is to remove the font-size reduction. The combination of the three must be too much for the Chrome and Edge browser engines to calculate upon page load? It may not work 100% of the time if there are 100s of rows, but it might render the borders correctly more often. Jroberson108 (talk) 18:51, 16 February 2022 (UTC)

In recent Firefox on macOS, I see a single (um, double due to retina) pixel wide spreadsheet type grid for the table. The lines never disappear, nor double up. In ancient Safari on macOS I see the same. In Firefox, if the table is next to article text, the text can run right up to the table edge. In Safari, clicking on the table puts a 2px blue round rect around the table - looks like some sort of focus selection. Also in Safari, the "COVID-19 pandemic medical cases in Foo" line scrolls with the data cells, i.e. the data cells can appear above the header row. EphemeralErrata (talk) 19:21, 16 February 2022 (UTC)

@EphemeralErrata: Regarding text next to the table edge, this is due to floating the template. I found the following floating templates and enabled the "margin" parameter of Template:Stack:

• COVID-19 pandemic in Arizona
• COVID-19 pandemic in Colorado
• COVID-19 pandemic in Idaho
• COVID-19 pandemic in Minnesota
• COVID-19 pandemic in Nebraska
• COVID-19 pandemic in New Mexico
• COVID-19 pandemic in Vermont
• COVID-19 pandemic in Washington (state)

Jroberson108 (talk) 07:01, 17 February 2022 (UTC)

@EphemeralErrata: Regarding the issues on Apple products, unfortunately I don't have any Apple products to test with. Previously, a sticky issue on iPhones was fixed by @TheDJ:, so maybe he can take a look? I haven't found anyone else able/willing to develop on Apple products. The "focus selection" may have something to do with the main div's tabindex="0" attribute? (More on tabindex). The "COVID-19 pandemic medical cases in ..." table caption should scroll out of view leaving the row of column headers sticky at the top. If the data cells are appearing above the top-sticky column headers when scrolling, then that is an issue, which unfortunately I can't test for. Jroberson108 (talk) 07:46, 17 February 2022 (UTC)

" In Safari, clicking on the table puts a 2px blue round rect around the table", yes that is the focus ring of #covid-19-pandemic-medical-cases-in-minnesota-by-county This div is focusable, because it has tabindex=0. The focus ring is outside the object. left/right of the object, there is no visual space to place the focus ring, so it gets cut off, top/bottom however has 1em margin, which is enough to show the focus ring on those sides. —TheDJ (talk • contribs) 16:20, 17 February 2022 (UTC)

"In Firefox, if the table is next to article text, the text can run right up to the table edge" There is no left margin on the wrapper, unlike inboxes and tables provide. There should be, whenever you right float objects, apply left margin. —TheDJ (talk • contribs) 16:24, 17 February 2022 (UTC)

@TheDJ: Margin was already applied in the article pages listed above that float the template. Jroberson108 (talk) 16:42, 17 February 2022 (UTC)

"[caption] line scrolls with the data cells" This is a side effect of the scrolling context being outside the table (unlike what the gadget does) Its expected.

"the data cells can appear above the header row" There are two possible causes. One, your on older version of Safari. There used to be a bug where Safari would reserve the caption space and offset your sticky headers that much down. I no longer experience this in Safari 15.3. The other thing is that the top border gets lost, so you see a 1/2px sliver at the top of the table that shows the data cells scrolling behind the sticky content. —TheDJ (talk • contribs) 16:32, 17 February 2022 (UTC)

@EphemeralErrata: Regarding the issue of some borders missing between random left-sticky row headers when the sort buttons are repositioned under the column header text, I think I found a fix. Add style="padding-bottom: 1em;" to the "County" column header, which repeats the template's style and is only needed on the column header that has left-sticky row headers. Seems like it being applied during load versus a stylesheet requires less to recalculate when the row headers are shifted down? The way the stylesheet is loaded might also play a role (above template versus in page "head")? The fix isn't desirable since the "sortunder" class should be enough, but it's the only thing I could come up with. I applied the fix to Texas/sandbox. For me, Texas has some missing borders, so you can test both before applying the fix globally. If "sortunder" isn't used, then remember to omit this style fix. Jroberson108 (talk) 07:14, 18 February 2022 (UTC)

Well, for a better comparison I copied the contents of Texas to its sandbox and reapplied the fix, which broke the fix. The only major change were "br" tags in the column headers, so the style fix has to be applied to all column headers. I updated Texas/sandbox. Jroberson108 (talk) 07:37, 18 February 2022 (UTC)

Because "sortable" doesn't work on the mobile and print versions, the unfortunate downside to this fix is that the column headers will have some unneeded padding under the text due to the lack of sort buttons, which seems acceptable in exchange for unbroken borders. See mobile versions for Texas and Texas/sandbox. Jroberson108 (talk) 08:14, 18 February 2022 (UTC)

@EphemeralErrata: Have you had a chance to try the "padding-bottom" fix? See changes on Texas/sandbox. Jroberson108 (talk) 21:39, 21 February 2022 (UTC)

The change is rolling out with edits today and tomorrow. I never see missing borders, so can't verify it. The only border issue I see is in Firefox where the top and left borders of collapsed view seem to be rendered at a sub-pixel position. Zooming in on a screen snapshot shows what should be a two retina-pixel line rendered as a gray pixel, then a black pixel, and another gray pixel. EphemeralErrata (talk) 16:02, 22 February 2022 (UTC)

@EphemeralErrata: I was under the impression that you were having border issues. I guess it is only visible in Windows Chrome and Edge? What is the version of the browser(s) you have issues in? Did you see the response from User:TheDJ? I won't be able to test anything on Mac, so you will have to get with him on Mac help. I suggest getting his attention on his talk page since he has notifications and mentions disabled. Jroberson108 (talk) 16:50, 22 February 2022 (UTC)

@EphemeralErrata: If your issue is different than what this section discusses (row header borders), then I suggest starting a new section and explaining there with browser version. This way there is less for TheDJ or others to read to understand the issue. Jroberson108 (talk) 16:58, 22 February 2022 (UTC)

@EphemeralErrata: I modified how Firefox borders are fixed, which affects all browsers. Can you check Texas/sandbox to see if your issues are fixed? If it works, then I'll copy the fix from "sandbox/styles2.css" to "styles2.css". Jroberson108 (talk) 20:40, 22 February 2022 (UTC)

Lines in the sandbox version look the same in Firefox (latest ESR release) and Safari (13.1.2), and look the same as an expanded table, as well as a regular table elsewhere. EphemeralErrata (talk) 21:17, 22 February 2022 (UTC)

@EphemeralErrata: Lines look same as in no issues? Also, do you have an iPhone you can test it on too? Jroberson108 (talk) 21:44, 22 February 2022 (UTC)

Jroberson108. EphemeralErrata. Sticky headers and header borders are working in all 4 browsers (Safari, Edge, Chrome, Firefox) on my iphone SE 2020. Both for column and row headers. For these tables:

• Template:COVID-19 pandemic death rates by country/sandbox
• Template:COVID-19 pandemic data/Texas medical cases by county/sandbox

--Timeshifter (talk) 02:49, 23 February 2022 (UTC)

Lines look same as in no issues with borders nor dividers. EphemeralErrata (talk) 03:25, 23 February 2022 (UTC)

I moved the sticky headers issue discussion to Safari sticky header issues so this discussion stays focused on missing borders on row headers. Jroberson108 (talk) 09:06, 23 February 2022 (UTC)

@EphemeralErrata and Timeshifter: The new Firefox borders fix has been copied to the "styles2.css" page. Jroberson108 (talk) 12:58, 23 February 2022 (UTC)

@EphemeralErrata: For Utah, two columns were missing the padding-bottom: 1em; style fix, which I added.

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

Safari sticky header issues

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Main page: Template:COVID-19 pandemic data/Minnesota medical cases by county

Note: Discussion split from Missing borders on sticky row headers. Relevant posts have also been quoted. Jroberson108 (talk) 09:06, 23 February 2022 (UTC)

Also in Safari, the "COVID-19 pandemic medical cases in Foo" line scrolls with the data cells, i.e. the data cells can appear above the header row. EphemeralErrata (talk) 19:21, 16 February 2022 (UTC)

The "COVID-19 pandemic medical cases in ..." table caption should scroll out of view leaving the row of column headers sticky at the top. If the data cells are appearing above the top-sticky column headers when scrolling, then that is an issue, which unfortunately I can't test for. Jroberson108 (talk) 07:46, 17 February 2022 (UTC)

"[caption] line scrolls with the data cells" This is a side effect of the scrolling context being outside the table (unlike what the gadget does) Its expected.

"the data cells can appear above the header row" There are two possible causes. One, your on older version of Safari. There used to be a bug where Safari would reserve the caption space and offset your sticky headers that much down. I no longer experience this in Safari 15.3. The other thing is that the top border gets lost, so you see a 1/2px sliver at the top of the table that shows the data cells scrolling behind the sticky content. —TheDJ (talk • contribs) 16:32, 17 February 2022 (UTC)

... Safari (13.1.2) ... EphemeralErrata (talk) 21:17, 22 February 2022 (UTC)

Sticky headers and header borders are working in all 4 browsers (Safari, Edge, Chrome, Firefox) on my iphone SE 2020. Both for column and row headers. ... --Timeshifter (talk) 02:49, 23 February 2022 (UTC)

With desktop Safari, as mentioned above, the header row, i.e. sticky row, does not move up to the edge when vertically scrolling. The scrolled content moves under it and a full row is visible above the sticky row. On my iPhone SE 2016 on iOS 14 in Safari, the table has no darker line at the top nor left. This looks OK as those cells have the gray background. It has the same sticky row issue as desktop Safari. EphemeralErrata (talk) 03:25, 23 February 2022 (UTC)

@EphemeralErrata: Are you able to update your browsers? From TheDJ's response, it sounds like he doesn't have any issues using Safari 15.3. Timeshifter also doesn't have any problems on his iPhone using iOS 15. Also, the position sticky style does indicate that Safari 13 or higher supports it, so perhaps there are other features requiring a newer version? If not, we can try adding the position: -webkit-sticky; style for older browsers and test that. Jroberson108 (talk) 09:40, 23 February 2022 (UTC)

@EphemeralErrata: After rereading your issue description, it sounds like sticky headers work, but you are experiencing the same bug TheDJ mentioned: "Safari would reserve the caption space and offset your sticky headers that much down." Do see if you can upgrade. Jroberson108 (talk) 16:29, 23 February 2022 (UTC)

@EphemeralErrata: I did some research and found some info on the caption bug, which affects Safari 14 and below as of September 30, 2021. On that page is a screenshot of the issue: [2]. Let me know if you are experiencing something different. They offer two fixes. Option one is to make the "thead" sticky instead of the "th" cells, which isn't ideal since wikitext puts everything in "tbody". If "sortable" is used, it moves the top row(s) of "th" cells to "thead", but it also moves the "sorttop" row, which shouldn't be top-sticky, just top-sorted. Option two is to visually hide the caption so it is still available to assistive technology, but this isn't ideal since the caption is part of the content that explains the table. So far upgrading to Safari 15 seems to be the only reasonable solution. Jroberson108 (talk) 09:21, 24 February 2022 (UTC)

This is exactly what I see. Both demos are fine in Firefox, while the second has the odd behavior in Safari. EphemeralErrata (talk) 12:12, 24 February 2022 (UTC)

@EphemeralErrata: Are you able to update to Safari 15? Jroberson108 (talk) 14:38, 24 February 2022 (UTC)

I would have to update iOS and macOS to get Safari 15. I'm disinclined to do that. I primarily use Firefox. I trust Timeshifter's tests. EphemeralErrata (talk) 15:45, 24 February 2022 (UTC)

OK, I won't worry about the caption bug on older versions of Safari and iOS then. Jroberson108 (talk) 16:17, 24 February 2022 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.