How about a horizontal scroll bar for posts with wide tables? See for example this one:
Or is there any other way of getting that table diaplayed?
How about a horizontal scroll bar for posts with wide tables? See for example this one:
Or is there any other way of getting that table diaplayed?
We need to change the HTML generation to wrap the table in a horizontal-scrollable <div>
. This is probably a good idea in general.
Just so that I understand correctly: this is nothing I can do as an admin, right? This requires coding in core, no?
the thing is, a simple <div style="overflow-x:scroll">YOUR LARGE TABLE</div>
would make it work, but the style will get removed when cooked, I think you would need a plugin to allow this on div (or allow a specific css class which would be better).
Basically it would mean having a helper which would have something like this:
export function setup(helper) {
helper.whiteList(['div.horizontal-table']);
}
Yeah I support changing core to div
wrap tables, then it will be trivial to correct this using CSS. As it stands I do not think there is a simple CSS workaround.
@awesomerobot is div wrapping required for tables to get overflow scroll or is there some black magic I am missing?
Yeah wrapping tables in a div and adding overflow: auto;
to that div is the simplest way
Example problem table is here:
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
|------------------|-------|-------|------|----------|--------|--------|--------------|--------------|------------------|---|-------|------|
| Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | | 30 | 9 |
| Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | | 1:28 | 2:43 |
| Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | | 10 | 11 |
| StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | | 0:33 | 0:30 |
| 95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | | 2:34 | 3:43 |
| Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | | 9 | 11 |
| | | | | | | | | | | | | |
| Include Outliers | | | | | | | | | | | | |
| | | | | | | | | | | | | |
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | | 37 | 9 |
| Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | | 2:55 | 2:43 |
| Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | | 11 | 10 |
| StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | | 3:39 | 0:30 |
| 95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | | 10:05 | 3:43 |
| Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | | 11 | 9 |
Provider | Local | HubiC | Mega | Onedrive | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | Jotta | Box | ||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | 30 | 9 | |
Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | 1:28 | 2:43 | |
Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | 10 | 11 | |
StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | 0:33 | 0:30 | |
95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | 2:34 | 3:43 | |
Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | 9 | 11 | |
Include Outliers | ||||||||||||
Provider | Local | HubiC | Mega | Onedrive | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | Jotta | Box | ||
Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | 37 | 9 | |
Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | 2:55 | 2:43 | |
Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | 11 | 10 | |
StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | 3:39 | 0:30 | |
95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | 10:05 | 3:43 | |
Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | 11 | 9 |
Complete per:
https://github.com/discourse/discourse/commit/8a6644684924fd5388aec1bc2125f958afe3de1e
I am pretty sure for horizontal scrollable tables you need overflow-x instead of overflow-y…
Hmm yeah @sam did we mix up our X’s and Y’s here?
Provider | Local | HubiC | Mega | Onedrive | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | Jotta | Box | ||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | 30 | 9 | |
Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | 1:28 | 2:43 | |
Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | 10 | 11 | |
StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | 0:33 | 0:30 | |
95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | 2:34 | 3:43 | |
Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | 9 | 11 | |
Include Outliers | ||||||||||||
Provider | Local | HubiC | Mega | Onedrive | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | Jotta | Box | ||
Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | 37 | 9 | |
Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | 2:55 | 2:43 | |
Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | 11 | 10 | |
StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | 3:39 | 0:30 | |
95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | 10:05 | 3:43 | |
Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | 11 | 9 |
But magically it is working. For both overflow-x
and overflow-y
. I think overflow-x
assigned to auto
automatically when we set overflow-y: auto
We should still fix the commit.
This topic was automatically closed after 24 hours. New replies are no longer allowed.