Tables overflow in HTML

[PeterBowman]

Markdown tables overflow in rendered HTML, but there is no way to scroll horizontally. I can see an overflow: hidden rule in the main <section> element, I think this disables any overflow-x in its children.

This shouldn't happen. Relevant tables are currently being cut.

[PeterBowman]

I suppressed the overflow property on <section> at 5d0fb41, but I'm not convinced of the result. On a desktop browser (Firefox), a horizontal scroll bar is added to the whole page in case any inner element overflows. On mobile it didn't help, though. Ideally, I'd like an individual scrollbar per overflowing table.

See also:

• https://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent
• Make child visible outside of overflow: hidden w3c/csswg-drafts#4092

[jgvictores]

Implemented potential fix at 4b71ccf. Perhaps introducing a plugin is overkill, the JavaScript at https://github.com/ideamean/gitbook-plugin-auto-scroll-table (implementation may slightly vary between github and npm, could not find original user) is pretty straightforward and follows an approach similar to https://www.w3schools.com/howto/howto_css_table_responsive.asp (wrapping each table in a div).

PS: Temporal preview at http://robots.uc3m.es/j/teo-developer-manual/_book/tutorial/trajectories.html

PPS: Just for the historic:

• https://github.com/Goopil/gitbook-responsive-table was not very cool. For a large screen (PC), tables were chopped, and for small screen (mobile), the generate list did not seem very intuitive.
• Did not try https://www.npmjs.com/package/gitbook-plugin-bootstrap-table because it's a rather large dependency that I believe we have not introduced yet.
• This alone did not work.

[PeterBowman]

Sorry, I noticed the JS is not applied when browsing pages. It does work if you open (or refresh) the one that contains overflowing tables, but for some reason it is not triggered on page change (despite the event binding).

[jgvictores]

Good catch!

I did notice that effect, but thought I had to refresh due to some browser cache. You are totally right.

[jgvictores]

Okay, it turns out that the downloaded code (possibly 0.0.5 from https://www.npmjs.com/package/gitbook-plugin-auto-scroll-table) is:

(function() {
    [].slice.call(document.querySelectorAll('table')).forEach(function(el){
        var wrapper = document.createElement('div');
        wrapper.className = 'table-area';
        el.parentNode.insertBefore(wrapper, el);
        el.parentNode.removeChild(el);
        wrapper.appendChild(el);
    });
  })();

I replaced this locally by the code at https://github.com/ideamean/gitbook-plugin-auto-scroll-table and it works without need of refreshing the page.

This makes sense because it is wrapped within gitbook.events.bind("page.change",: https://github.com/ideamean/gitbook-plugin-auto-scroll-table/blob/cae3506409e5a6813a3dc2b36cca097bebd6e114/book/plugin.js#L1-L2

[PeterBowman]

Options:

• If (technically and legally) possible, locally hardcode the JS/CSS code this plugin contains.
• If gitbook install favors globally available plugins prior to checking the NPM store, pull and install the latest version of this plugin in our Docker image, possibly alongside the other plugins we usually consume just because why not.

[jgvictores]

Okay, Ill check what's possible. By the way, I hadn't translated the Chinese text at https://github.com/ideamean/gitbook-plugin-auto-scroll-table ...turns out it says There is a bug in the original plug-in, it will take effect after refreshing the page. Need to bind the event to the page.change event. Modified plugin.js lol

[jgvictores]

PS: https://github.com/GitbookIO/plugin-scripts seems like a reasonable approach

[jgvictores]

Okay, b3d2d6d sums it all up, with credits as clear as possible.

Branch https://github.com/roboticslab-uc3m/teo-developer-manual/tree/scroll-table-69 taken from 2 commits before current master, so we can force-push avoiding alternatives that we are not using, thus leaving a clean historic.

[PeterBowman]

Thanks! I think we can just commit-merge it, letting those two intermediate patches stay since they seemed to address the problem at least partly. Besides: the combined CSS could be split into page-TOC-related and scroll-table-related (but is it worth?), and I assume there are no other GitBook repos in which we need to replicate this hack (in which case see the alternative Docker solution, not yet tested).

[PeterBowman]

If gitbook install favors globally available plugins prior to checking the NPM store, pull and install the latest version of this plugin in our Docker image, possibly alongside the other plugins we usually consume just because why not.

I think this is not possible. A gitbook install command fetches and installs the latest GitBook release (if not available yet) and processes all NPM plugins in book.json. However, it dismisses any previous installation via NPM utilities, so having run npm install -g gitbook-plugin-auto-scroll-table doesn't prevent gitbook install from installing another copy of this or any other plugin. In other words, I cannot neither preinstall selected plugins into the Docker image, nor shadow the NPM version of this faulty plugin with the latest GitHub code.

[PeterBowman]

Okay, b3d2d6d sums it all up, with credits as clear as possible.

Merged at a5a17e3, but sadly our GitBook/GH Pages workflow fails with EACCES: permission denied, scandir (log). This is due to the _book/gitbook/gitbook-plugin-scripts directory having 700 permission flags while every other dir is publically readable.

My first guess is that the Docker image should create and expose a non-root user, but that doesn't solve the permission issue, which also interweaves with ownership considerations. This problem can be replicated locally if running rootless Docker since GitBook files generated in that way have root ownership and hence a 700 dir cannot be accessed by the host. Despite not using sudo in our workflow, I believe it is added behind the scenes given that all generated files are reported as root:root by ls -l (log).

[PeterBowman]

I'm trying to improve our Docker image so that container processes are run as non-root user, per best practices (ref). Sadly, I think I'll give up. On a rootless Docker installation, it seems impossible for the container user to take ownership of the mounted volume, which consequently prevents any writes on said directory. Basically, I'm hitting moby/moby#3124, but the explanation given at moby/moby#3124 (comment) seems wrong as of today (see further comments).

A few links:

• https://jtreminio.com/blog/running-docker-containers-as-current-host-user/
• https://stackoverflow.com/questions/45836272/running-as-a-host-user-within-a-docker-container
• https://docs.docker.com/engine/reference/run/#user
• https://stackoverflow.com/questions/45836272/running-as-a-host-user-within-a-docker-container
• https://devops.stackexchange.com/questions/4540/how-to-change-the-owner-of-volume-directory-in-dockerfile/4542

There might be another way: instruct the container to run as a specific user via --user CLI option. However, I'd rather avoid enforcing additional steps for such a simple image. The culprit of all of these issues is the lack of public permissions on a specific plugin directory, ownership is fine.

[PeterBowman]

Finally fixed thanks to a workaround: ea1a61c.

To sum up, we are just fixing the public permissions on _book/gitbook/gitbook-plugin-scripts (needs rx):

$ ls -l _book/gitbook
drwxr-xr-x 3 root root   4096 May 12 15:30 fonts
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-fontsettings
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-highlight
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-lunr
drwxr-xr-x 4 root root   4096 May 12 15:30 gitbook-plugin-mermaid-gb3
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-page-toc
drwx------ 2 root root   4096 May 12 15:30 gitbook-plugin-scripts
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-search
drwxr-xr-x 2 root root   4096 May 12 15:30 gitbook-plugin-sharing
-rw-r--r-- 1 root root 105401 May 12 15:30 gitbook.js
drwxr-xr-x 2 root root   4096 May 12 15:30 images
-rw-r--r-- 1 root root  52701 May 12 15:30 style.css
-rw-r--r-- 1 root root 113264 May 12 15:30 theme.js

What was considered but didn't work:

• Spawn a container of our Docker image instead of the default Ubuntu one via jobs.<job_id>.container, thus effectively ignoring all ownership and permission concerns. It would not work, though, because of lacking some standard packages such as git in order to use the checkout and gh-pages actions.
• Pre-install a set of common plugins within our Docker image, including the custom GitHub version of auto-scroll-bar. Not doing since gitbook install pulls NPM packages anyway, shadowing those installed by any other means. However, it might have worked if the preinstallation placed NPM packages inside the .gitbook/ shared directory instead of NPM's global or local dirs. Not tested, but also more convolute.
• At this point, we just resorted to copy-pasting the fixed JS and publishing it via "scripts" plugin. As explained before, it messes up the directory permissions. See Tables overflow in HTML #69 (comment) for context.

Mory hackish ways involve symlinking: https://stackoverflow.com/questions/30897205/create-a-gitbook-plugin-locally-without-publishing-it (found by @jgvictores).

[jgvictores]

I think this is not possible. A gitbook install command fetches and installs the latest GitBook release (if not available yet) and processes all NPM plugins in book.json. However, it dismisses any previous installation via NPM utilities, so having run npm install -g gitbook-plugin-auto-scroll-table doesn't prevent gitbook install from installing another copy of this or any other plugin.

Small (useless for now) discovery: If you install it locally (in the specific repo directory), e.g. npm install gitbook-plugin-include-csv (note that npm will complain regarding no package.json here) before running gitbook install, it actually does catch the plugin. However, for the specific use case of trying to fix roboticslab-uc3m/docker-gitbook#1 there was no luck; actually performing the build results in:

• node v10.24.1 crashes with a PluginError: Error with plugin "include-csv": Unexpected token {
• node v12.22.8 via Possible upgrade to node 12.x.x docker-gitbook#2 (comment) crashes with a package.json mess (PluginError: Error with plugin "include-csv": Package subpath './lib/sync' is not defined by "exports" in /tmp/teo-developer-manual/node_modules/csv-parse/package.json).