CODEWITHSUNDEEP
htmlrrstudioknitrr-markdown
Hyped7777
Hyped7777

Reputation: 111

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

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?

Upvotes: 11

Views: 7040

Answers (2)

Adam Elder
Adam Elder

Reputation: 21

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;

Upvotes: 2

Martin Schmelzer
Martin Schmelzer

Reputation: 23889

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

Upvotes: 4

Related Questions