Very huge table: horizontal scroll bar is out of reach

[brobr]

Hi, thank you so much for the beautiful furo theme and the clear documentation. (Just finding my way in documenting my python project using sphinx).
Maybe this potential issue is easy solvable with some custom css but I could not get around the following problem:

A page with a large data table that is wider and longer than the displayed area cannot be navigated easily..
As expected, a vertical scroll-bar is available, but the horizontal scroll-bar is out of reach.

The horizontal scroll-bar is present but sticks at the bottom of the table (not at the bottom of the visible part of the page). This makes the wide-and-long table very cumbersome to read: a user has to scroll down before they can scroll horizontally.

The same problem shows up with the rtd theme, but with alabaster the scroll-bars are present as expected on the side and bottom of the page, allowing easy scanning of the table.

Also alabaster uses in this case available space on the right of the center-column/main page; occupying the area used to display a table of contents of the page. Turning that off with :hide-toc: at the top of the source-rst file does not help in furo.

Could you give me a pointer how to work around this?

(This behavior shows up on Vivaldi (Chrome-like), Firefox, and Seamonkey on Slackware linux)

[pradyunsg]

Please share screenshot, and provide example markup that can be used to recreate this behaviour.

[brobr]

In the screenshots, the mouse pointer is at a scroll-bar. Note that in alabaster the horizontal scroll-bar appears always on the window, with furo (and rtd) the horizontal scroll-bar sticks to the bottom of the table.

alabaster-long-giant-table

alabaster-no-extra-css-bottom-long-giant-table

furo-long-giant-table

furo-no-extra-css-bottom-long-giant-table

long-giant-table.rst: long_giant_table-rst.txt

The extra css (see below) just makes alabaster more readable and keep table text mono-space. All commented options I tried but did not work to correct scroll-bar presentation with furo

body {
/* overflow-y: scroll; /* Show vertical scrollbar */
/* overflow-x: scroll; /* Show horizontal scrollbar */   /* ... */
/* scrollbar-gutter: auto | stable && both-edges? */
 font-family: sans-serif;
}


table{    
 /* scrollbar-gutter: auto | stable && both-edges? */

  /* overflow:scroll; */
}

td, th {
   white-space: nowrap;
   text-align: left;
}

td {
   font-family: monospace;
}

[brobr]

Sorry never know how to nicely get pasted code to show in these boxes...

body {
/* overflow-y: scroll; /* Show vertical scrollbar */
/* overflow-x: scroll; /* Show horizontal scrollbar */ /* ... */
/* scrollbar-gutter: auto | stable && both-edges? */
font-family: sans-serif;
}

Edit (no pencil at my end ;-( : but thanks for the tip; fab!

body {
/* overflow-y: scroll; /* Show vertical scrollbar */
/* overflow-x: scroll; /* Show horizontal scrollbar */ /*  ...  */
/* scrollbar-gutter: auto | stable && both-edges? */
font-family: sans-serif;
}

[pradyunsg]

https://help.github.com/articles/getting-started-with-writing-and-formatting-on-github/ should have the necessary information to help you improve the formatting of your comments. :)

Specifically, here's how you do code blocks:

```python
print("Hello world!")
```

print("Hello world!")

[pradyunsg]

I've gone ahead and editted your previous post.

You can try improving the formatting of your comment in this thread, by editing it in place using the pencil icon in the corner.

[brobr]

Is it linked to the ability of furo (and rtd) to keep the navigation side-pane in view where in alabaster it sticks to the top?

The classic theme is like alabaster, it lets the table flow over into the right side-pane.

[brobr]

Hi, changing content width from 46em to 100% shows more of the table (like alabaster), when put in the extra css file.

Alternatively, using flex-basis: 100% seems to work better (it keeps the scroll-bar at the bottom of the table when stuff gets out of sight.)

.page .main .content {
  flex-basis: 100%;
}

I guess one has to turn their ipad/mobile to landscape to keep all in view but at least there are enough indications that there is more to see than before.
Still, no idea how one gets a scrollbar on the bottom of the viewing area with that flex layout..

[pradyunsg]

You can’t. Unlike Alabaster, Furo uses the region on the right of the content, and thus, any overflow needs to be contained; which is why the table is scrollable. I’m not sure there’s any way to have a scroll bar on the bottom of the page be related to the positioning of the table.

[brobr]

Yes, the presence of that :toc: side bar even when empty, creates non-used space. Setting flex-basis to 100% fills that in (as explained on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and makes that more of the table is shown.

Trying things out on https://codepen.io/JosephSilber/pen/qGebw?editors=1100 (replacing what's there with attached) did not help to find a better way around;

• The table determines the width of the page.
• Did not manage to transfer this via extra css to Furo-themed pages.

test-page_css.txt
test-page_html.txt

[pradyunsg]

Unlike Alabaster, Furo uses the region on the right of the content, and thus, any overflow needs to be contained; which is why the table is scrollable in the manner that it is.

I’m not sure there’s any way to have a scroll bar on the bottom of the page be related to the positioning of the table.

[ailin-nemui]

I was facing a similar issue and my workaround is to put the whole table into a smaller box, then at least you can get to the scroll bars more easily

I used the following css:

.wide-table {
    /* .sidebar-drawer + .content padding */
    width: calc(100vw - calc(max(calc((100vw - 82em) / 2 + 21em), 21em)));
    /* .content + .toc-drawer */
    /* max-width: 61em; */
    max-height: calc(90vh - 2em);
}
@media (max-width: 82em) {
.wide-table {
    width: calc(100vw - calc((100vw - 67em) / 2 + 21em));
}
}
@media (max-width: 67em) {
.wide-table {
    width: calc(100vw - 6em);
    margin-left: calc(3em + calc(-50vw + 50%));
    max-height: calc(90vh - calc(2em + var(--header-height)));
}
}
@media (max-width: 46em) {
.wide-table {
    width: calc(100vw - 2em);
    margin-left: calc(1em + calc(-50vw + 50%));
}
}

I chose to manually add an extra wide-table class to the div with the table-wrapper, but you could change wide-table to table-wrapper to affect all tables

you can see an example of it on https://irssi.org/security/

of course the right toc needs to be empty