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

Bug report: column header invisible + border modifying

I used the setup this CSS page provides here for sticky headers and rows and during vertical scrolling the column headers disappear but not the sorting arrows. As well as class="sticky-row" style="height: 2em; border-bottom: 2px solid gray;" doesn't display thicker borders. Can this be resolved? Qwerty284651 (talk) 20:17, 29 May 2024 (UTC)

@Qwerty284651: "sticky-row" should be used once on the first row with these styles. Looks like you added the {{sticky header}} template too, but it shouldn't be used with this since they have different styles. I would just use that other template and keep it simple. If you still need the vertical scroll, that template has a "sticky-header-scroll" class that can be added. I simplified the table's usage, so it should work now. Jroberson108 (talk) 21:03, 29 May 2024 (UTC)

Thanks. You removed the sticky row I had setup. I want to have the table inside a shorter div scroll, because it will only get longer with subsequent wins and to preserve space, I used the class=scroll container from the CSS page, but I feel, regular overflow: auto with custom style=width, maybe 30, 40 em, should do the trick. Thoughts? Qwerty284651 (talk) 21:22, 29 May 2024 (UTC)

@Qwerty284651: I added the above mentioned "sticky-header-scroll" class for the vertical scroll. It adjusts in height based on device, so kind of like a percentage of the page height (75vh). It makes it fit on mobile and desktop. Jroberson108 (talk) 21:49, 29 May 2024 (UTC)

What is 75vh in pt or em? Qwerty284651 (talk) 22:02, 29 May 2024 (UTC)

@Qwerty284651: 75% of the viewport height, which the height can vary based on device. Read more here: [1] [2]. Jroberson108 (talk) 22:23, 29 May 2024 (UTC)

Thanks for the sources. Any idea on why the markup on the line borders isn't showing? Qwerty284651 (talk) 00:12, 30 May 2024 (UTC)

Can you add a custom param for the vh to be toggleable? I would have at 50% or even less. Qwerty284651 (talk) 00:13, 30 May 2024 (UTC)

@Qwerty284651: I added an inline style of "50vh" to the div to override the template's style. Jroberson108 (talk) 00:26, 30 May 2024 (UTC)

Thanks. Qwerty284651 (talk) 00:31, 30 May 2024 (UTC)

Stick row and sticky col class

Can you make a sticky row template similar to {{sticky header}}? In this example, which you helped with I had to add

<div class="covid19-container" role="region" tabindex="0"> above the chart. Can the addition of templatestyles and class=covid19-container be substituted with a sticky-row template, which can the be added to the Help:Table/Advanced and further enrich tables across wiki.

Side note: can a custom param be added for sticky-col1 or 2 classes (fake row; I presume this would require javascript) that could handle col/rowspans in tables and not have them appear skewed up when vertically scrolling? See a bad example with row groups. Qwerty284651 (talk) 00:08, 4 June 2024 (UTC)

Why is Firefox table slightly cut off horizontally?

Jroberson108. Please see: Wikipedia talk:WikiProject Tennis#Timeshifter's table. It is using this:

There is a horizontal scrollbar on my large desktop monitor in Firefox in Win 10 Pro. But not on Edge or Chrome. I am logged in on all of the browsers.

This is not happening on this table in the same discussion:

• Wikipedia talk:WikiProject Tennis#Qwerty284651's table

The only current difference between the 2 tables is class=nowrap in my table. But I don't understand why that matters. My monitor is plenty wide. It is a 43 inch monitor. --Timeshifter (talk) 00:43, 7 July 2024 (UTC)

@Timeshifter: I see it in Firefox too, which is correct since the table is wider than the main content area. It fits the content area in Chrome, so it doesn't show. Firefox and Chrome render things slightly differently. It appears Firefox renders the "nowrap" class's styling different from Chrome. I suggest using {{sticky header}} instead, which is more thouroughly tested. Jroberson108 (talk) 07:14, 7 July 2024 (UTC)

We had agreed there not to use nowrap. I left it there (as I noted there) just so that others could see why we agreed not to use nowrap. Which was because of its effects in portrait view on cell phones.

So we don't need to use {{sticky header}}.

It sounds like a bug in Firefox since it doesn't make sense that the table is wider than the main content area on a 43 inch monitor. --Timeshifter (talk) 08:31, 7 July 2024 (UTC)