Template talk:COVID-19 pandemic data/styles.css
|
|
Archives: 1 |
|
This page has archives. Sections older than 90 days may be automatically archived by Lowercase sigmabot III when more than 1 section is present. | |
Bug report: column header invisible + border modifying[edit]
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)
- @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)
- @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)
- What is 75vh in pt or em? Qwerty284651 (talk) 22:02, 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)
- 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)