Template talk:Sticky table start: Difference between revisions

Content deleted Content added

Inline

Revision as of 20:01, 30 July 2024

Tests of new template

Note: See previous discussion: Template talk:Sticky header#Template:Sticky table start and Template:Sticky table end.

Thanks Jroberson108. Here are some tests:

User:Timeshifter/Sandbox264 - Single top row. Covid CSS.
User:Timeshifter/Sandbox265 - Single top row. {{sticky table start}}
User:Timeshifter/Sandbox266 - Multi rows in header. {{sticky table start}}

What I have noticed in my iphone SE 2020. Sticky headers work fine on the single row in Safari and Chrome. Except that the right border of the left-sticky column disappears upon use.

Sticky headers work strangely on the multi-row top headers. In both Safari and Chrome. Same problem also with right border of the left sticky column.

Looks like the colspans are causing problems in the multi-row top headers? --Timeshifter (talk) 10:52, 28 July 2024 (UTC)[reply]

For the rowspan problem on 266 where left sticky is applied to some of the next column, use the "sticky-table-unsticky" class on those two cells: "Number" and "Total".

For the border, I'll have to take a closer look at how they differ from the covid CSS ones. Jroberson108 (talk) 14:57, 28 July 2024 (UTC)[reply]

Done. Thanks. 266 is working great now. I highlighted the wikitext. --Timeshifter (talk) 18:13, 28 July 2024 (UTC)[reply]

The borders fix was reversed on {{sticky header}} from what the covid CSS had to fix the borders for {{static row numbers}}. Reversing them back and applying the remaining styles will fix the issue, but one of the top borders will be missing for the {{static row numbers}} column, specifically the one that separates the header/sorttop rows from the rest of the data that follows. You can see the difference on the testcases pages in the following sections and the three sections that follow them:

Jroberson108 (talk) 19:56, 28 July 2024 (UTC)[reply]

Jroberson108 and HouseBlaster. Moved thread here.

I think the right-side border on the left-sticky column is more important. --Timeshifter (talk) 08:29, 29 July 2024 (UTC)[reply]

@Timeshifter: I can agree that the right/bottom borders are more important to keep visible when sticky. The changes are live now. There are no other sandboxed styles. Feel free to update the doc. I only added two quick examples, but might need more.

The {{sticky header}} issue should be a moved to that template's talk in a new section. Jroberson108 (talk) 14:51, 29 July 2024 (UTC)[reply]

Done. See Template talk:Sticky header. --Timeshifter (talk) 10:29, 30 July 2024 (UTC)[reply]

Expand/Collapse toggle button

@Timeshifter and HouseBlaster: See Template:Sticky table start/testcases. I added a way to show (expand w/o sticky) or hide (collapse w/ sticky) the table, but not fully hide the content so it stays accessible. This is similar to the covid CSS expand/collapse behavior. This provides a way to disable the sticky features for cases where on mobile the sticky portions are too wide or tall and covers most or all of the data making the data unreadable (accessibility issue). What do you think? I haven't fully tested it. Jroberson108 (talk) 20:51, 29 July 2024 (UTC)[reply]

LGTM on my Mac in Firefox, Chrome, and Safari. Thank you for your work! House Blaster (talk · he/they) 23:33, 29 July 2024 (UTC)[reply]

Template:Sticky table start/testcases.

About the expand/collapse toggle button. In its current location inside the scroll window it is further limiting the number of data rows visible in my iphone browsers. I only see one data row in landscape view in my iphone SE 2020.

I suggest putting the toggle button above the scroll window, and not in the scroll window. The button is above and outside the scroll window in the covid CSS tables here:

COVID-19 pandemic by country and territory.

--Timeshifter (talk) 13:42, 30 July 2024 (UTC)[reply]

It isn't sticky, so it will scroll out of view. It can be moved above, but will add more height to the total page. Keep in mind that the covid CSS is a different implementation that has less testing and features. Its usage will most likely be replaced by this template before deletion. Jroberson108 (talk) 17:15, 30 July 2024 (UTC)[reply]

It has been moved outside the scroll div. Jroberson108 (talk) 18:47, 30 July 2024 (UTC)[reply]

New template fixes page width problem

One really good thing about this template is that it fixes the problem of wide tables messing up page widths in Chrome in my iphone SE 2020.

For example see this version of COVID-19 pandemic by country and territory.

Specifically the wide table in "Cases and deaths by region" section. In that page version it is using {{sticky header}}.

I will change it to {{sticky table start}}. I did, and it fixed the page width problem. --Timeshifter (talk) 12:55, 30 July 2024 (UTC)[reply]

Template:Screen reader-only

In the previous talk section I discussed a wide table. I noticed that only one data row was showing in Chrome on my iphone in landscape view.

Due to the multi-line header, and due to the long wrapping caption inside the scroll window. Also, due to the wrapping within rows.

I copied the caption and put it outside and above the scroll window. I then added Template:Screen reader-only to the caption inside the table.

Now I see 2 data rows. They are taller rows due to some wrapping within in the rows. When I scroll down to narrow rows, I see 3 data rows in landscape view.

It would be nice if the sorting arrows could disappear upon scrolling.

All this stuff adds up: toggle location, caption location, sorting arrows, and number of header lines. --Timeshifter (talk) 13:11, 30 July 2024 (UTC)[reply]

Which table? The collapsible button and caption aren't sticky, so they will scroll out of view. As I recall, keeping the caption in the table's caption element is probably needed for screen readers unless aria tags are added. You would need JavaScript to hide the sort arrows upon a scroll event in the div when not scrolled at the top. Not possible with these templates. Jroberson108 (talk) 16:50, 30 July 2024 (UTC)[reply]

The table in the section titled "Cases and deaths by region":

COVID-19 pandemic by country and territory#Cases and deaths by region:

The caption remains in the table's caption element when using Template:Screen reader-only. But it is not seen by sighted readers, and it does not get in the way. The caption is duplicated above the table for sighted readers. This particular table does not have a collapsible button.

I will have to show the various options on a sandbox page, because it is hard to explain without seeing the differences in a cell phone. --Timeshifter (talk) 19:46, 30 July 2024 (UTC)[reply]

So sighted see "caption" above table. Screen reader has it above and in the table, basically read twice. I can't see many editors going the extra mile to do this. Anyways, it isn't anything that can be done through this template. Jroberson108 (talk) 20:01, 30 July 2024 (UTC)[reply]

@@ Line 70: / Line 70: @@
 ::The caption remains in the table's caption element when using [[Template:Screen reader-only]]. But it is not seen by sighted readers, and it does not get in the way. The caption is duplicated above the table for sighted readers. This particular table does not have a collapsible button.
 ::I will have to show the various options on a sandbox page, because it is hard to explain without seeing the differences in a cell phone. --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 19:46, 30 July 2024 (UTC)
+:::So sighted see "caption" above table. Screen reader has it above and in the table, basically read twice. I can't see many editors going the extra mile to do this. Anyways, it isn't anything that can be done through this template. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 20:01, 30 July 2024 (UTC)