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