How to make vertical scrollbar appear in RMarkdown code chunks (html view)

Question

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?

Unfrequented

Answer 1

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)

Libidinous

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? – Unfrequented

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 { ... }). – Libidinous

It does not work on the output table when Kable is used. – Calicle

Of course it does not. You would have to change the CSS tag from pre to the one that wraps around the kable table. – Libidinous

Answer 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;

Humidify