21

I am using RMarkdown to create an ioslide presentation with shiny. Some of my slides do not actually fit on one page and are truncated.

Since this is a HTML output, I would like to add a scroll bar to make my long slides scrollable.

I have been googling a lot and found a partial solution to make R code chunks scrollable. However I want to make my slides scrollable regardless of the content.

This is a toy Rmd example giving slides not fitting on one page:

---
title: "Untitled"
date: "30 October 2018"
output: ioslides_presentation
runtime: shiny
---

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

## Shiny Presentation 

- A very long

- and boring

- list of

- bullet points

- just a

- toy example

- obviously

- not over yet

- almost

- not quite

- finally

- out of frame!

I would like to make this slide scrollable since it does not fit on one page.

Edit: I am not sure why this is being heavily downvoted - would appreciate a constructive comment :) In the meantime, I did remove the css tag which may have brought people not familiar with rmarkdown.

Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
asachet
  • 6,620
  • 2
  • 30
  • 74
  • 1
    Even Though you will self-answer it is still not a good question since you did not provide any information that we could help nor that it will help anyone in the future – SuperDJ Oct 30 '18 at 12:45
  • 4
    The question is how to add a scrollbar to a slide in an ioslides presentation built with r-markdown. I think this is a clear question with a clear answer (as demonstrated by my answer). The question and its answer would sure have helped me 1 hour ago. – asachet Oct 30 '18 at 12:49
  • 19
    Disclaimer: I'm one of the main authors of the **rmarkdown** package. From my point of view, this is a totally valid and in fact excellent question. I also appreciate that the OP found and shared a solution below. I have always found those who downvote without explanations offensive and irresponsible, and more often than not, [they don't really know what they're doing.](https://yihui.name/en/2018/02/closed-so-question/) I want to challenge those people if they really understand what R Markdown is in the first place. Just because you are an CSS expert doesn't mean you are an `rmarkdown` expert. – Yihui Xie Oct 30 '18 at 16:16

1 Answers1

20

Self-answer:

The bit of CSS that will make the slide scrollable (both horizontally and vertically but you just have to remove one line if only vertical scrolling is needed) is:

slides > slide {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

Note that the slide gets a height from ioslide so there is no need to specify a height (and in fact it seems to introduce visual glitches if you do). Using auto instead of scroll makes sure a scrollbar only appears when there is a need.

You can either add this CSS directly in the Rmd in between <style> tags or put the CSS in a separate file (e.g. scrollable_slides.css).

The CSS file can then be added to the Rmd like this (assuming scrollable_slides.css is in the same directory as the Rmd):

---
title: "..."
output: 
  ioslides_presentation:
    css: 'scrollable_slides.css'
runtime: shiny
---
asachet
  • 6,620
  • 2
  • 30
  • 74
  • This is pretty cool, but it modifies _all_ slides (with overflow), not _the_ slide. ;) Is there any way to limit this to a single slide? – user3283722 Mar 14 '22 at 13:05