Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 414
Hyped7777 Avatar asked Dec 14 '16 04:12

Hyped7777


2 Answers

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

like image 69
Martin Schmelzer Avatar answered Sep 24 '22 09:09

Martin Schmelzer


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;
like image 23
Adam Elder Avatar answered Sep 23 '22 09:09

Adam Elder