[英]How to make scrollable slides in an ioslides presentation with rmarkdown
I am using RMarkdown to create an ioslide presentation with shiny. 我正在使用RMarkdown创建一个闪亮的ioslide演示文稿。 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. 由于这是一个HTML输出,我想添加一个滚动条,使我的长幻灯片可滚动。
I have been googling a lot and found a partial solution to make R code chunks scrollable . 我一直在谷歌搜索,并找到一个部分解决方案,使R代码块可滚动 。 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: 这是一个玩具Rmd示例,幻灯片不适合在一个页面上:
---
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. 编辑:我不确定为什么这会被大量投票 - 会赞赏一个建设性的评论:)在此期间,我确实删除了可能带来不熟悉rmarkdown的人的css
标签。
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: 可以使幻灯片滚动的CSS位(水平和垂直,但如果只需要垂直滚动则只需删除一行)是:
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). 请注意,幻灯片从ioslide获得高度,因此无需指定高度(事实上,如果你这样做,它似乎会引入视觉故障)。 Using auto
instead of scroll
makes sure a scrollbar only appears when there is a need. 使用auto
而不是scroll
可确保仅在需要时显示滚动条。
You can either add this CSS directly in the Rmd in between <style>
tags or put the CSS in a separate file (eg scrollable_slides.css
). 您可以直接在<style>
标记之间的Rmd中添加此CSS,也可以将CSS放在单独的文件中(例如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): 然后可以将CSS文件添加到Rmd中(假设scrollable_slides.css
与Rmd位于同一目录中):
---
title: "..."
output:
ioslides_presentation:
css: 'scrollable_slides.css'
runtime: shiny
---
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.