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
---
Related
I want to include some text above the graphics in the main area of a frame in Flexdashboard storyboard. Here's the minimal example.
---
title: "Title"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
horizontal_layout: scroll
runtime: shiny
---
Storyboard name {.storyboard}
=====================================================================
### Storyboard frame 1
```{r}
renderPlot({
plot(rnorm(1e3))
})
```
>Footnote
***
Data commentary text.
When I add the text just above and outside the R chunk, the graph gets truncated at the bottom.
The graph needs to be inside renderPlot() to include interactive elements. It appears the problem is because the height parameter of renderPlot() is "auto", which automatically sets the height of the graphic to the height of the whole frame, and since the text is included, the height that it sets means the graph doesn't fit the area less the text and gets truncated. I found by experimenting the height can be set to a fixed size in pixels. I can set the height in pixels by trial-and-error that would look OK on my screen, but unfortunately it doesn't fully solve the problem, because users who open the app in a different screen resolution would get a messed up layout.
Personally speaking, fixing the height is not a big issue, fixing the width is the bigger problem for users with different screens. Both overflow height and width can be converted to a scrollable page, but it is always comfortable to scroll the document vertically but not horizontally, and this is what most websites are doing. Anyhow, if you don't want to fix the height of the plot with px, the easiest way is to add a scroll bar to the left column so users can scroll and see the hidden content:
Add this chunk and you are all set.
```{css}
.chart-wrapper .chart-stage {
overflow-y: auto;
}
```
---
title: "How do you top align this figure below?"
output: flexdashboard::flex_dashboard
---
```{r c1, fig.width=9}
plot(mtcars)
```
The R flexdashboard code above generates a plot that is centered vertically when I maximize my dashboard window. It looks like this.
Instead, I want the image to be vertically top aligned, with no white space above the image. It would look like the image below, with any spare white space placed below the image (should your window be maximized). If your output doesn't quite match mine just resize your output window to be tall and thin (think of rotated "coding" monitors).
The R Markdown argument fig.align only has horizontal options (left, right, center) and the flexdashboard argument .no-padding doesn't seem to help.
How do I get flexdashboard to top align within R Markdown?
You could use css to override the background position of the image.
---
title: "Flex"
author: ""
output:
flexdashboard::flex_dashboard:
orientation: rows
css: styles.css
---
Page One
=======================================================================
Row
-----------------------------------------------------------------------
### chart1
```{r, fig.width=12}
plot(mtcars)
```
styles.css (in same working directory):
.image-container {
background-position: center top !important;
}
I want to have an image to fill the whole slide.
I have tried to use a div with absolute positioning, however, that will position the image partly outside of the slide.
I think I could make that work, if I hard code the resolution in, however, I would like to make it work on another machine as well. (and preferably even with the wide screen switching)
An example to reproduce/test:
---
title: "some title"
author: Me
company: Me
date: 21-02-2017
output:
ioslides_presentation
---
##
edit:
I am aware of:
Rpresentation in Rstudio - Make image fill out the whole screen
However, there they switched to slidy_presentation and I already have custom css for ioslides. If possible I would like to stay with ioslides. And it should be possible, right? :)
I got an idea when I was looking for getting my text output even smaller.
I found this: Markdown: Change default font size of code chunks in ioslides
Now I am using the following custom css:
.fullslide img {
margin-top: -85px;
margin-left: -60px;
}
Then in in the rmarkdown file I can do:
## {.fullslide}
If you now want to make sure that you get the full image, make sure the image has the following dimensions:
widescreen: 1100 x 700
normal: 900 x 700
I just make sure I edit them using GIMP or something.
I have not yet figured out how I can suppress the page numbering, but apparently you cannot suppress page numbers on a per slide basis. :(
I am putting together an Rmarkdown PDF document with the following YAML settings:
---
output:
pdf_document:
fig_caption: true
fig_crop: true
toc_depth: 3
header-includes:
- \usepackage{hyperref}
---
Within the body of the document I've inserted a few PNG images, using the following syntax
Paragraph 1..........
Paragraph 2....
And when the document is rendered, the image appears as expected within the text, between Paragraph 1 and Paragraph 2. However, I am getting some unpredictable results where the rendered image appears after Paragraph 2 in some cases and I can't manage to solve it.
I have run into the same problem. It appears if you wrap the image in "paragraph" tags, the image will be in-line with the text.
Paragraph 1...
<p>
</p>
Paragraph 2...
When tackling similar issues, I've used \FloatBarrier (from the placeins package) to control positioning. I'm not the most experienced knitr rmarkdown LaTeX user, but I've had success with that before.
Basically, the images "float"; you can control what the can't float past by inserting a barrier. That description is crude, but you might find the technique effective.
\newline seems to work.
History and Overview of R
\newline
will insert vertical space
to keep your figure captions make sure the ![] is still in a separate paragraph (separated by blank lines above and below) in the Rmarkdown document
### Heading 1 {width=400px}
### Heading 2
where fig_var is an r variable that contains the full path to the figure image
One option is to add
\newpage
to act in a similar way as the Floatbarrier. It is not to elegant but seems to work.
For greater clarity consider the example from above:
Paragraph 1..........
Paragraph 2....
To avoid the image to move in front of the second paragraph, you could do the following:
Paragraph 1..........
\newpage
Paragraph 2....
There is no correct answer to this.
Try adding fig.show='hold' to keep your images where they should be
The paragraphs might be skipped because Latex will try and fit the text/images with least space.
I sorted my issue out using (1) and to "work with" (2), you can use
\pagebreak in an appropriate position depending on what is before and after paragraphs 1 and 2.
This can be done only after seeing the pdf result, by better fitting of the image in question into potentially a next page (more space). Of course, it would also mean adding the page break elsewhere (e.g before or after any of the p1, p2 or the image).
What are possible ways of adding table of contents in html output of knitr::knit2html()?
I am familiar with the markdownHTMLOptions solution. However the result is not the good-looking one? For me it is important to have such table of contents so that it follows the webpage while scrolling and i could possibly navigate anytime I want.
A floating table of contents is now supported by Rmarkdown! It moves with you as you scroll, you click to navigate... such an improvement :)
The directions are very good: http://rmarkdown.rstudio.com/html_document_format.html
In short, add this at the top of your rmd script, where toc stands for table of contents, and float means that it stays visible on the left as the page scrolls:
---
title: "Bla"
output:
html_document:
toc: true
toc_float: true
---