Use htmlwidgets with revealjs in rmarkdown

Question

I am working in Rmarkdown with the revealjs_presentation format and I want to include an html widget created by leaflet. I tried naively to just include it in a slide, knowing that there would probably have a conflict between reveal.js css and leaflet, which is the case. As you could see in the following screenshot, there are some unknown black lines on my leaflet map.

---
title: "Untitled"
output:
  revealjs::revealjs_presentation:
    self_contained: false
---

## Slide with a widget

```{r, echo=FALSE}
library(leaflet)
library(magrittr)
leaflet() %>%
  addTiles()
```

However note that, at this point, the widget will resize correctly if the screen size changes.

I assumed that encapsulating the leaflet widget in an iframe could potentially solve my problem of weird black lines since they are probably created by reveal.js itself (which would not be loaded in the iframe).

Effectively, that solved the problem of the black lines, but unfortunately, the widget won't resize to the window this time. I suppose this is due to the iframe being resized when the screen size changes, but not the widget inside the iframe.

---
title: "Untitled"
output:
  revealjs::revealjs_presentation:
    self_contained: false
---

## Slide with a widget

```{r, echo=FALSE}
library(leaflet)
library(magrittr)
library(widgetframe)
frameWidget({leaflet() %>%
  addTiles()
})
```

The net effect is that if a create the slides on my laptop and display them on my laptop, using the iframe works fine, but if I want to project my slides on a projector, then the widget is being too small for the (newly resized) iframe, which results in white padding for the unused part of the iframe.

Any ways of solving my problem is welcome. I guess two possible ways are:

Use some CSS trick instead of encapsulating my leaflet map in an iframe
Make the widget inside the iframe to resize when the iframe is resized

I unfortunately am not able to make work any of both, largely due to my (very) very limited skills in html/js/css. I'll work on them as soon as I have some time, but I need your help on that for now.

Thanks!

score 0 · Answer 1 · answered Dec 29 '20 at 21:45

I had a similar issue, but resolved it by adjusting the width to 100%. I placed the following code in my .RMD file (at the end works):

<script>
  widg = document.getElementsByClassName('html-widget'); //find widgets
  for (let i = 0; i < widg.length; i++) { //loop through
    document.getElementsByClassName('leaflet')[i].style.width = '100%'; //adjust width
  }
</script>

This looped through all of reveal's html widget objects and adjusted their width.

Use htmlwidgets with revealjs in rmarkdown

1 Answers1