How to make scrollable slides in an ioslides presentation with rmarkdown

Question

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.

Answer 1

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
---