11

I've found many examples outlining how to add horizontal scrollbars to R Markdown HTML output, including this specific example here. However, none that describe how to add vertical scrollbars. Again borrowing from the linked example, but transposing a wide matrix to a "tall" matrix, I'd like to scroll vertically through the matrix in my ioslide presentation.

---
title: "Vertical needs"
author: "Hyped"
date: "December 13, 2016"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## Where's my vertical scrollbar?

```{r}
x <- matrix(nrow = 40, ncol = 4, data = 1)
x
```

The output of the above matrix extends to the bottom edge of the slide and then vanishes. No scrollbar. I tried modifying the answers given for solving the lack of horizontal scrollbars by modifying the CSS style code added to the .Rmd file (or placed in a custom CSS) from 

<style>
pre code, pre, code {
  white-space: pre !important;
  overflow-x: scroll !important;
  word-break: keep-all !important;
  word-wrap: initial !important;
}
</style>

to (swapping overflow-x to overflow-y):

<style>
pre code, pre, code {
  white-space: pre !important;
  overflow-y: scroll !important;
  word-break: keep-all !important;
  word-wrap: initial !important;
}
</style>

but no luck. Can anyone provide the missing piece of the puzzle?

Community
  • 1
  • 1
Hyped7777
  • 111
  • 1
  • 3

2 Answers2

4

The problem seems to be that you did not specify the height of the code chunk. Try this instead:

<style>
pre {
  white-space: pre !important;
  overflow-y: scroll !important;
  height: 50vh !important;
}
</style>

(For information about the unit vh check this)

enter image description here

Martin Schmelzer
  • 23,283
  • 6
  • 73
  • 98
  • This works! Thanks! However, I had one additional question about the solution.... Other _horizontal scrollbar_ solutions seem to combine the pre tag with the code tag. However, even adding _echo=TRUE_ to the R-code chunk to see the code text in the output, I don't see any _code_ tags in the HTML source. Instead, I see pre.lang-r which I'm guessing I can set off to separate styles between the code text itself and the output. Can you offer any comments on this? – Hyped7777 Dec 14 '16 at 15:51
  • Interestingly I can't find them either. I am not sure if the use of the code tag was removed in recent versions. Anyhow, you can of course use `pre { ... }` and `pre.lang-r { ... }` to set different styles (or `pre:not(lang-r)` and `pre.lang-r { ... }`). – Martin Schmelzer Dec 14 '16 at 16:08
  • It does not work on the output table when Kable is used. – Rio Aug 09 '19 at 17:50
  • Of course it does not. You would have to change the CSS tag from `pre` to the one that wraps around the kable table. – Martin Schmelzer Aug 09 '19 at 22:20
2

Adding onto @Martin Schmelzer's solution, I noticed there can be issues if echo = TRUE, or if your output is not much large in other parts of the document. To fix this issue just change:

height: 50vh !important;

to 

max-height: 50vh !important;
Cà phê đen
  • 1,883
  • 2
  • 21
  • 20
Adam Elder
  • 21
  • 4