Tables in appendix have hidden horizontal scroll

[jakob-r]

Problem:

Proposed solution (quick & dirty):

.table {
  overflow: visible;
}

#sidebar{
  background-color: #FFFFFF
}

video

[pat-s]

Thanks. How about this

.table {
    width: 135%;
    max-width: 135%;
    margin-bottom: 21px;
    background-color: white;
    position: sticky;
}

This expands the table width and adds a white background. With this tables are now allowed to span more or less the width of the full container rather than just the body-width. This way, the sidebar is still sticky for other sides and will be auto-covered by the table if there is one.

The important parts are

• position: sticky;
• width: 135%;

others are just the preserved settings from the default css table setting.

[jakob-r]

I needed to add z-index so that it actually covers the sidebar. So this would have to be added to extra.css (margin-bottom will be inherited from boostrap.min.css)

.table {
    width: 135%;
    max-width: 135%;
    background-color: white;
    position: sticky;
    z-index: 1;
}

[pat-s]

Hm, strange. Usually higher z-index values should cover lower ones. On the other side this setting shouldn't do any harm. Let's go with this and see how the result looks like.

[pat-s]

I might need to adjust width later to see how it plays with not so wide tables, e.g. in mlr3.

[pat-s]

Fixed in https://github.com/mlr-org/mlr3pkgdowntemplate/commit/86b29e08490594007239e0ab3ac86586f02bfbbd.

[jakob-r]

I might need to adjust width later to see how it plays with not so wide tables, e.g. in mlr3.

This might be an issue. We can select the tables the following way:

• measures

  #classification .table, #multilabel-classification .table, ...

• learners (because the id includes the number we have to be creative)

  div[id|=classification] .table, div[id|=regression] .table, ...

Okay. This is very specific and not really nice. Unfortunately I don't find any attribute I can select on a higher level (e.g. all tables in integrated learners) because the template does not generate any specific id or whatsoever :(

We could add something like <span class="wideTable"></span> in the Rmd files in front of each table. This should be ignored for the pdf but will give us the possibility to select the following table with:

span.wideTable+.table {
    width: 135%;
    max-width: 135%;
    background-color: white;
    position: sticky;
    z-index: 1;
}

I think I like this solution beacuse we don't have to be too content specific in the css files and we can use this behavior wherever we want.

[pat-s]

We could add something like in the Rmd files in front of each table. This should be ignored for the pdf but will give us the possibility to select the following table with:

Sounds good. Do you wanna do a PR?

[pat-s]

@jakob-r I've reverted to use normal table styles again. The change caused all tables to overflow everything horizontally.

I also added a new css class .wideTable which can be used for specific tables.

It should go something like

table = <raw markdown table>

knitr::kable(table, table.attr='class="wideTable"', format = "html")

Though things are not working perfectly yet. It might even be easier when using R objects instead of raw markdown tables.

I am not sure if the table.attr arg is silently dropped for PDF or will cause problems.