Xaringan: Using .pull-left and pull-right twice on a slide makes it misalign the columns

Created on 11 Apr 2020  路  3Comments  路  Source: yihui/xaringan

Hi,
I asked the same question in stackoverflow.

The issue:
Using xaringan, the first time I split content in two columns with .pull-left and .pull-right it works fine, but if I use it a second time in the same slide, then it starts the second column below the left one, and not aligned on the top

The solution I got from stackoverflow was using a different css (ninjutsu) and declare the pull-left and right parameters in the markdown with

` {css, echo =F}
.pull-left {
float: left;
width: 44%;
}

.pull-right {
  float: right;
 width: 44%;

}

.pull-right ~ p {
clear: both;
}

````

In case you want to look into this, and check if there is a problem, here is a reprex


````
---
title: "reprex-left.right"

author: "Ramon Gallego"

date: "4/10/2020"

output:   xaringan::moon_reader
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(warning = FALSE, message = FALSE)

The first time you do it works fine

.pull-left[
```{r}
y <- data.frame(A = LETTERS[1:5],
B = 1:5,
C = sqrt(6:10))

]

.pull-right[
Some text in here talking abut indexing, dataframes, accessing stuff 
]

The second time it seems to start the second column below the left column

.pull-left[
See how the right box is going down

so down.
]

.pull-right[
```{r}
y <- data.frame(A = LETTERS[1:5],
                B = 1:5,
                C = sqrt(6:10))

]


.pull-left[
See how the right box is not going down

]

.pull-right[
{r} y <- data.frame(A = LETTERS[1:5], B = 1:5, C = sqrt(6:10))

]

````
Here it is the session.info

R version 3.6.2 (2019-12-12)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6, RStudio 1.2.5033

Locale: en_US.UTF-8 / en_US.UTF-8 / en_US.UTF-8 / C / en_US.UTF-8 / en_US.UTF-8

Package version:
base64enc_0.1.3 BH_1.72.0.3 digest_0.6.25 evaluate_0.14 glue_1.4.0
graphics_3.6.2 grDevices_3.6.2 highr_0.8 htmltools_0.4.0 httpuv_1.5.2
jsonlite_1.6.1 knitr_1.28 later_1.0.0 magrittr_1.5 markdown_1.1
methods_3.6.2 mime_0.9 promises_1.1.0 R6_2.4.1 Rcpp_1.0.4
rlang_0.4.5 rmarkdown_2.1 servr_0.16 stats_3.6.2 stringi_1.4.6
stringr_1.4.0 tinytex_0.21 tools_3.6.2 utils_3.6.2 xaringan_0.16.1
xfun_0.12 yaml_2.2.1

And a screenshot of the wrong output

Screen Shot 2020-04-10 at 5 01 05 PM


By filing an issue to this repo, I promise that

  • [x] I have fully read the issue guide at https://yihui.org/issue/.
  • [x] I have provided the necessary information about my issue.

    • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.

    • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').

    • If I have posted the same issue elsewhere, I have also mentioned it in this issue.

  • [x] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

Most helpful comment

Thanks for the report!
In order to look at this more closely, can you format your issue better please ?
https://yihui.org/issue/#please-format-your-issue-correctly
Thank you !

All 3 comments

Thanks for the report!
In order to look at this more closely, can you format your issue better please ?
https://yihui.org/issue/#please-format-your-issue-correctly
Thank you !

I think that's better now - apologies if that's not the case

@ramongallego I just bumped into this on my own and found your issue while checking to see if anyone else had encountered the same problem. I submitted a PR with a fix, but you can also include the following CSS in a chunk in your slides:

.pull-right ~ * { clear: unset; }
.pull-right + * { clear: both; }
Was this page helpful?
0 / 5 - 0 ratings

Related issues

richardohrvall picture richardohrvall  路  3Comments

tcgriffith picture tcgriffith  路  4Comments

beatrizmilz picture beatrizmilz  路  4Comments

kevinykuo picture kevinykuo  路  3Comments

bnicenboim picture bnicenboim  路  5Comments