15

When preparing a presentation with RMarkdown's ioslides, I encountered a problem which I have not been able to find a solution for. This answer did also not solve this specific problem.

Sometimes, two-column layouts are best to explain something with an image on one side and text on the other. However, As in the following example, the column breaks do not appear to work as desired.

Is there any way to force columnbreaks at a specific point? I have thought about increasing the image height on the right, but unfortunately that sometimes is not an option. 

---
title: "Some stange column break"
output: 
  ioslides_presentation:
    widescreen: true
---

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

<!-- the columns should break here -->

```{r, echo = FALSE, out.width = "470px"}
plot(mtcars)
```

enter image description here

loki
  • 9,816
  • 7
  • 56
  • 82

2 Answers2

25

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

forceBreakWide

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>
Matt Summersgill
  • 4,054
  • 18
  • 47
  • could you add some details how to define the class "forceBreak". I guess somewhere in the header. – loki Jul 03 '18 at 18:03
  • 1
    Shoot, forgot that I use a custom CSS template for that one. I added the line `.forceBreak { -webkit-column-break-after: always; break-after: column; }` to the CSS template I've put together for my company's internal usage. Will update answer to reflect... – Matt Summersgill Jul 03 '18 at 18:09
  • Thanks for all your effort. However, did you check this with the example from the Q? Unfortunately, Method 1 does not change anything. Method 2 works perfectly. – loki Jul 03 '18 at 19:09
  • I updated my example answer to reflect your provided example. The code chunk is the full, verbatim, text of the .Rmd file I rendered, and the screenshot below it shows the output on my system. If copying and pasting the above example doesn't work, then maybe we need to investigate potential discrepancies between package/pandoc versions, OS settings, etc.? I'll post my SessionInfo and the R Markdown console output above in case that helps. – Matt Summersgill Jul 03 '18 at 19:41
  • What OS are you you using? **I had to change the header of the plot chunk to `{r, echo = FALSE,fig.width=4.7}` to get this to work on my Windows machine.** Based on that, I'm thinking this may have something to do with the different pandoc or knitr/markdown versions. – Matt Summersgill Jul 03 '18 at 19:53
  • I am working on Linux. Changing `out.width = '470px'` to `fig.width = 4.7` did the trick. Thanks so much! – loki Jul 04 '18 at 09:23
0

You stop content from using up the space below your second column by adding an empty div below your second column that adds the clear style, thus disabling reflow from elements further below.

<div style="clear: both;"></div>

I found out about this from here: https://css-tricks.com/all-about-floats/

Bastián Olea Herrera
  • 454
  • 4
  • 14