Two-Column Layouts in Rstudio Presentations/Slidify/Pandoc

two-column layouts in RStudio presentations/slidify/pandoc

I now have what I think is a reasonable solution that should apply at least to ioslides-based solutions, and maybe (?) to other HTML5-based formats. Starting here, I added

<style>
div#before-column p.forceBreak {
    break-before: column;
}
div#after-column p.forceBreak {
    break-after: column;
}
</style>

to the beginning of my document; then putting <p class="forceBreak"></p> within a slide with {.columns-2} breaks the column at that point, e.g.

## Latin hypercube sampling {.columns-2}

- sample evenly, randomly across (potentially many) uncertain parameters

<p class="forceBreak"></p>

![](LHScrop.png)
[User:Saittam, Wikipedia](https://commons.wikimedia.org/wiki/File:LHSsampling.png#/media/File:LHSsampling.png)

There may be an even better way, but this isn't too painful.

@ChrisMerkord points out in comments that

.forceBreak { -webkit-column-break-after: always; break-after: column; }

worked instead (I haven't tested ...)

RStudio not rendering two column powerpoint properly

There are 4 output formats in your Rmd file. If you just include powerpoint and/or beamer your knitted file should be rendered with two columns as desired.

If you want to use slidy_presentation you could do the following:

<div class='left' style='float:left;width:48%'>
  code or image for left of slide
</div>
<div class='right' style='float:right;width:48%'>
  code or image for right
</div>

as described here or with a custom layout as described here.

For ioslides_presentation, see this answer which nicely describes forcing a break between two columns with ioslides. (And again, you can simply add html tags as with the slidy_presentation example above.)

force column break in RMarkdown ioslides {.columns-2} layout

I have used two methods in the past, both answers in the question you linked. Am I missing something about why these didn't meet your needs?

Method 1 seems to be what you're after, but I personally have trended toward using method 2 because I like the flexibility of having different width columns.

Note: I have only tested these methods using the ioslides format

---

Method 1: forceBreak, inline style tags

This requires an additional CSS class defined, which you can do inline at the beginning of your document.

---
title: "Untitled"
output: 
  ioslides_presentation:
      widescreen: true
---

<style>
.forceBreak { -webkit-column-break-after: always; break-after: column; }
</style>


## Slide Title {.columns-2 .smaller}
### Slide Subtitle

>- Some bullet points which take up some space space space space space space space

>- on the column on the left

>- which are then wrapped to the right column. 

>- *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.*

>- line break after this longer bullet point but intead it breaks in some strange place even though it would have space at the bottom of the left column!

<p class="forceBreak"></p>

```{r, echo = FALSE, fig.width=4.7}
plot(mtcars)
```

Method 2: HTML tags

This method doesn't require any additional CSS definitions or external files.

---
title: "Untitled"
output: ioslides_presentation
---

## Another Method for Two Column Layouts

<div style="float: left; width: 40%;">
+ This text is on the left
</div>

<div style="float: right; width: 60%;">
+ This text is on the right
</div>

---

Related Topics