Horizontal scroll bar for wide tables?

ux
1

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?

5 Likes
2

We need to change the HTML generation to wrap the table in a horizontal-scrollable <div>. This is probably a good idea in general.

7 Likes
3

Just so that I understand correctly: this is nothing I can do as an admin, right? This requires coding in core, no?

4

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']);
}
5

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?

4 Likes
6

Yeah wrapping tables in a div and adding overflow: auto; to that div is the simplest way

4 Likes
8

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 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
9

Complete per:

https://github.com/discourse/discourse/commit/8a6644684924fd5388aec1bc2125f958afe3de1e

5 Likes
12

I am pretty sure for horizontal scrollable tables you need overflow-x instead of overflow-y…

2 Likes
13

Hmm yeah @sam did we mix up our X’s and Y’s here? :wink:

image

2 Likes
14
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

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 :thinking:

5 Likes
15

We should still fix the commit.

3 Likes
16

This topic was automatically closed after 24 hours. New replies are no longer allowed.