rmdformat: change default table scroll box

Question

Context

The rmdformats package provides a few cool default theme for Rmds. I'm using the downcute theme.

Reproducible example

However, when I plot a table in my html document, the theme automatically sets a few defaults that I can't figure out how to edit.

---
title: "Test"
output: rmdformats::downcute
---  

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() %>% 
  scroll_box(width = "100%", height = "400px")
```

Here is how it looks like (SCROLL TO THE BOTTOM TO SEE THE SECOND HORIZONTAL SCROLLBAR):

Issues

There are two issues with this output:

The scroll_box function adds a new layer of scroll bars instead of replacing the existing one which is automatically set up by the package. Thus, you end up with two horizontal scroll bar (the second one seems to be off)
The labels of the columns are not fixed on top.

Expected Result

I would like to get the following output. To create the expected result I switched to the html_document theme, but I would like to use the rmdformats theme!

---
title: "Test"
output: html_document
---

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() %>% 
  kable_styling() %>% 
  scroll_box(width = "100%", height = "400px")
```

Any help? Maybe a CSS solution?

Extra info

> sessionInfo()
R version 4.1.3 (2022-03-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=Italian_Italy.1252  LC_CTYPE=Italian_Italy.1252    LC_MONETARY=Italian_Italy.1252 LC_NUMERIC=C                  
[5] LC_TIME=Italian_Italy.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] kableExtra_1.3.4 dplyr_1.0.9     

loaded via a namespace (and not attached):
 [1] bslib_0.3.1       jquerylib_0.1.4   highr_0.9         pillar_1.7.0      compiler_4.1.3    rmdformats_1.0.4  tools_4.1.3      
 [8] digest_0.6.29     jsonlite_1.8.0    viridisLite_0.4.0 evaluate_0.15     lifecycle_1.0.1   tibble_3.1.6      pkgconfig_2.0.3  
[15] rlang_1.0.2       DBI_1.1.2         cli_3.3.0         rstudioapi_0.13   yaml_2.3.5        xfun_0.30         fastmap_1.1.0    
[22] httr_1.4.3        stringr_1.4.0     knitr_1.39        xml2_1.3.3        sass_0.4.1        systemfonts_1.0.4 generics_0.1.2   
[29] vctrs_0.4.1       webshot_0.5.3     tidyselect_1.1.2  svglite_2.1.0     glue_1.6.2        R6_2.5.1          fansi_1.0.3      
[36] rmarkdown_2.14    bookdown_0.26     purrr_0.3.4       magrittr_2.0.3    scales_1.2.0      ellipsis_0.3.2    htmltools_0.5.2  
[43] assertthat_0.2.1  rvest_1.0.2       colorspace_2.0-3  utf8_1.2.2        stringi_1.7.6     munsell_0.5.0     crayon_1.5.1

When I run your code, there is no double horizontal scroll bar. — Quinten, May 26 '22 at 13:57
Can you tell me your R version and rdmformats version? I'm using R4.1.3 and rmdformats1.0.3, and I do see the issue. :( — Edo, May 26 '22 at 14:51

Kat · Accepted Answer · 2022-05-27T16:44:49.680

You have to control the table and the table wrapper elements. Let me know if this isn't what you were looking for.

---
title: "Test"
output: rmdformats::downcute
---  

<style>
table, .table-wrapper {
  height: 400px;
  width: 100%;
  overflow: auto;
}
</style>

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() #%>% 
 # scroll_box(width = "100%", height = "400px")
```

I don't know how you planned to use the other space, but this template has obnoxious margins. If you wanted to maximize the use of space, then update the content between the <style> tags to the following content:

<style>
table, .table-wrapper {
  height: 400px;
  width: 100%;
  overflow: auto;
}
.layout-narrow .Wrap {
  margin: unset;
  max-width: unset;
}
</style>

Notice that there is no horizontal scrollbar now because the entire width of the table is showing.

Update: Adding a sticky header row

To make the top row stick, change the content in the <styles> tags to the following. (You can still add the .layout-narrow .Wrap styles to this, as well.)

Note that it's not table, .table-wrapper. table is no longer in these tags.

<style> 
.table-wrapper {
  overflow: auto;
  height: 400px;
  width: 100%;
}
thead, th {
  top: 0;
  position: sticky;
  z-index: 2;
}
</style>

Hi Kat, thank you for your answer. You nailed the first issue. Do you have any idea on the second one? "The labels of the columns are not fixed on top." — Edo, May 27 '22 at 09:22
@Edo, it's updated with the styling for a sticky header row. Let me know if there is anything else! — Kat, May 27 '22 at 16:45
is there a specific reason why " z-index" is 2 instead of 1 ? — Edo, May 30 '22 at 11:22
No. I did have to try several different methods...so there may have been another z in there at one point. However, just being on top should be sufficient now. — Kat, May 30 '22 at 14:32

Quinten · Answer 2 · 2022-05-26T16:59:29.070

rmdformats version 1.0.4

When I run your code:

---
title: "Test"
output: rmdformats::downcute
---  

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() %>% 
  scroll_box(width = "100%", height = "400px")
```

This is the output:

There is only one horizontal and vertical scrollbar.

Sessioninfo

R version 4.1.0 (2021-05-18)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS 12.4

Matrix products: default
LAPACK: /Library/Frameworks/R.framework/Versions/4.1/Resources/lib/libRlapack.dylib

locale:
[1] nl_NL.UTF-8/nl_NL.UTF-8/nl_NL.UTF-8/C/nl_NL.UTF-8/nl_NL.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] kableExtra_1.3.4 dplyr_1.0.9      rmdformats_1.0.4

loaded via a namespace (and not attached):
 [1] pillar_1.7.0      compiler_4.1.0    tools_4.1.0       digest_0.6.29     viridisLite_0.4.0
 [6] evaluate_0.15     lifecycle_1.0.1   tibble_3.1.7      pkgconfig_2.0.3   rlang_1.0.2      
[11] cli_3.3.0         DBI_1.1.2         rstudioapi_0.13   yaml_2.3.5        xfun_0.31        
[16] fastmap_1.1.0     httr_1.4.3        stringr_1.4.0     knitr_1.39        xml2_1.3.3       
[21] systemfonts_1.0.4 generics_0.1.2    vctrs_0.4.1       webshot_0.5.2     tidyselect_1.1.2 
[26] svglite_2.1.0     glue_1.6.2        R6_2.5.1          fansi_1.0.3       rmarkdown_2.14   
[31] bookdown_0.25     purrr_0.3.4       magrittr_2.0.3    scales_1.2.0      ellipsis_0.3.2   
[36] htmltools_0.5.2   rsconnect_0.8.25  assertthat_0.2.1  rvest_1.0.2       colorspace_2.0-3 
[41] utf8_1.2.2        stringi_1.7.6     munsell_0.5.0     crayon_1.5.1

rmdformats version 1.0.3

Sessioninfo

R version 4.1.0 (2021-05-18)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS 12.4

Matrix products: default
LAPACK: /Library/Frameworks/R.framework/Versions/4.1/Resources/lib/libRlapack.dylib

locale:
[1] nl_NL.UTF-8/nl_NL.UTF-8/nl_NL.UTF-8/C/nl_NL.UTF-8/nl_NL.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] kableExtra_1.3.4 dplyr_1.0.9      rmdformats_1.0.3 devtools_2.4.3   usethis_2.1.5   

loaded via a namespace (and not attached):
 [1] tidyselect_1.1.2  xfun_0.31         remotes_2.4.2     purrr_0.3.4       colorspace_2.0-3 
 [6] vctrs_0.4.1       generics_0.1.2    testthat_3.1.2    viridisLite_0.4.0 htmltools_0.5.2  
[11] utf8_1.2.2        rlang_1.0.2       pkgbuild_1.3.1    pillar_1.7.0      glue_1.6.2       
[16] withr_2.5.0       DBI_1.1.2         sessioninfo_1.2.2 lifecycle_1.0.1   stringr_1.4.0    
[21] munsell_0.5.0     rvest_1.0.2       evaluate_0.15     memoise_2.0.1     knitr_1.39       
[26] callr_3.7.0       fastmap_1.1.0     ps_1.7.0          fansi_1.0.3       scales_1.2.0     
[31] cachem_1.0.6      desc_1.4.1        pkgload_1.2.4     webshot_0.5.2     fs_1.5.2         
[36] systemfonts_1.0.4 brio_1.1.3        digest_0.6.29     stringi_1.7.6     bookdown_0.26    
[41] processx_3.5.3    rprojroot_2.0.2   cli_3.3.0         tools_4.1.0       magrittr_2.0.3   
[46] tibble_3.1.7      crayon_1.5.1      pkgconfig_2.0.3   ellipsis_0.3.2    xml2_1.3.3       
[51] prettyunits_1.1.1 assertthat_0.2.1  rmarkdown_2.14    svglite_2.1.0     httr_1.4.3       
[56] rstudioapi_0.13   R6_2.5.1          compiler_4.1.0

In your screenshot there is no scrollbar. Anyway, the second horizontal scrollbar can be seen only if you scroll till the bottom of the table. You're showing MAZDA in you screenshot which is at the top of the table. Try to go to the bottom. Btw I tried to update my rmdformats version but I still get the same issue. — Edo, May 26 '22 at 16:54
@Edo, I used both versions and there is no problem with the scrollbars. The scrollbars pop up when hoving over it. Do you use something else than macOS? — Quinten, May 26 '22 at 17:00
I think it is because you use windows. On Mac scrollbars appear only when the cursor is in the scroll bar area or when you start scrolling. When you scroll the bars show up. That's why the second horizontal bars is not there. — Quinten, May 26 '22 at 17:09
Maybe it's an issue on Windows. However, I need a solution applicable to my specs. — Edo, May 26 '22 at 17:23

rmdformat: change default table scroll box

Context

Reproducible example

Issues

Expected Result

Extra info

2 Answers2

Update: Adding a sticky header row

rmdformats version 1.0.4

Sessioninfo

rmdformats version 1.0.3

Sessioninfo