Slides on xaringan with the ability to scroll horizontally

Question

Slides on xaringan with the ability to scroll horizontally

I am interested in displaying the output of an R command within a horizontally scrolling box. See below for an example:

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

Is there a way to create horizontal scrolling for this output on a xaringan slide?

css xaringan remarkjs

Answer 1

Answer №1

The answer provided by @Yihui Xie can be found on Github. I have taken that answer and created a working example here, with some key points to keep in mind:

1) You can specify CSS in code chunks in Rmarkdown or create your own CSS file following the guidelines at https://github.com/yihui/xaringan/wiki. Since this may be a one-time task, I am including the CSS directly in the Rmd file for simplicity.

2) In addition to setting attributes for the pre element, you also need to adjust the width option in R to a larger value to prevent wrapping of the output by head.

---
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) # trick head into not wrapping text
head(movies)
options(op) # reset options back to default


---

{r}
head(movies) # default width causing text wrap, but you can still horizontally scroll due to the `pre` setting

Answer 2

The answer provided by @Yihui Xie can be found on Github. I have taken that answer and created a working example here, with some key points to keep in mind:

1) You can specify CSS in code chunks in Rmarkdown or create your own CSS file following the guidelines at https://github.com/yihui/xaringan/wiki. Since this may be a one-time task, I am including the CSS directly in the Rmd file for simplicity.

2) In addition to setting attributes for the pre element, you also need to adjust the width option in R to a larger value to prevent wrapping of the output by head.

---
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) # trick head into not wrapping text
head(movies)
options(op) # reset options back to default


---

{r}
head(movies) # default width causing text wrap, but you can still horizontally scroll due to the `pre` setting

Slides on xaringan with the ability to scroll horizontally

Answer №1

Similar questions

Unlimited icon carousel crafted with CSS

Owl carousel issue: Fixed position not functioning properly

Utilizing jQuery, a captivating slideshow showcasing a series of images elegantly emerges from the center-right of

Press anywhere outside the container to conceal it along with the button

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Troubleshooting issue: Bootstrap 4 input group not properly showing invalid feedback text

Is there a way to ensure uniform font display across all browsers?

Adaptable images - Adjusting image size for various screen dimensions

Maximize margin usage by extending to full width

Avoiding the text being emphasized when hovering over the navigation bar list

When hovering over the menu, the page's opacity decreases to 0.5

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

Using the MVC framework, create a hyperlink with custom CSS styling by

Every outcome was displayed within a table format rather than as individual rows

AngularJS tiger striping for a hidden rows table

What could be causing the hover effect to malfunction in this code snippet?

Establishing updated file path for resources in JavaScript based on environment

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

Configuring local fonts in Puppeteer using npm

What is the best way to align two buttons horizontally together?