Horizontally scrollable output on xaringan slides

Question

I'd like to have the output of an R command shown in a horizontally scrolling box. Reprex:

library(ggplot2movies)
head(movies)
#                      title year length budget rating votes   r1   r2  r3   r4   r5   r6   r7   r8   r9  r10 mpaa Action Animation Comedy Drama Documentary Romance Short
# 1                        $ 1971    121     NA    6.4   348  4.5  4.5 4.5  4.5 14.5 24.5 24.5 14.5  4.5  4.5           0         0      1     1           0       0     0
# 2        $1000 a Touchdown 1939     71     NA    6.0    20  0.0 14.5 4.5 24.5 14.5 14.5 14.5  4.5  4.5 14.5           0         0      1     0           0       0     0
# 3   $21 a Day Once a Month 1941      7     NA    8.2     5  0.0  0.0 0.0  0.0  0.0 24.5  0.0 44.5 24.5 24.5           0         1      0     0           0       0     1
# 4                  $40,000 1996     70     NA    8.2     6 14.5  0.0 0.0  0.0  0.0  0.0  0.0  0.0 34.5 45.5           0         0      1     0           0       0     0
# 5 $50,000 Climax Show, The 1975     71     NA    3.4    17 24.5  4.5 0.0 14.5 14.5  4.5  0.0  0.0  0.0 24.5           0         0      0     0           0       0     0
# 6                    $pent 2000     91     NA    4.3    45  4.5  4.5 4.5 14.5 14.5 14.5  4.5  4.5 14.5 14.5           0         0      0     1           0       0     0

How do I make the output horizontally scrollable on a xaringan slide?

For the record, this was also cross-posted at https://github.com/yihui/xaringan/issues/147 (and I suggested Stack Overflow). — Yihui Xie, Jun 19 '18 at 14:16

score 4 · Accepted Answer · answered Jul 07 '18 at 03:12

@Yihui Xie has pretty much provided the answer on Github. I'm just making it into a working example here. Things to note are:

1) One can specify css as code chunks in Rmarkdown, or one can write his or her own css file following these guidelines: https://github.com/yihui/xaringan/wiki. I'm assuming this is a one-off thing so for simplicity I'm including the css in the Rmd file.

2) After setting attributes for the pre element, one also need to set the width option or R to a large value, otherwise head will wrap the output for you.

---
title: "Horizontal scroll for wide output"
output:
  xaringan::moon_reader:
    css: ["default"]
    nature:
      highlightLines: true
---

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

```{css, echo=FALSE}
pre {
  background: #FFBB33;
  max-width: 100%;
  overflow-x: scroll;
}
```

```{r}
library(ggplot2movies)
op <- options("width"=250) # large number to trick head, otherwise see next slide
head(movies)
options(op) # set options back to default
```

---

```{r}
head(movies) # head with default width, note text gets wrapped. Though you can still scroll horizontally, as an effect of setting `pre`
```

This works, but when I try to actually scroll right (or left) I end up moving between slides instead. Is there a way to override the L/R scroll input to capture it within the block and not pass it to the slides? — Matt Pollock, Dec 11 '18 at 16:31
@MattPollock, I ran into the same problem with moving between slides instead of scrolling. In Firefox (as opposed to the RStudio viewer), if I use the touchpad to do a two-finger tap on the scroll-able output, then the scrollbar appears (as does the right-click menu). Not perfect, but functional. Ideally, the scrollbars would always be visible. — wutangforever, Sep 10 '19 at 18:05
Looks like having the scrollbars always available can be set in CSS (as above), but also depends on OS/browser setting. — wutangforever, Sep 10 '19 at 18:22

Horizontally scrollable output on xaringan slides

1 Answers1