timevis blocks custom css in xaringan

[jvcasillas]

I am using timevis inside a xaringan presentation. When I embed the presentation all of the custom css I use to style the slides seems to be overridden by timevis. Is there a workaround for this?

[daattali]

Please post sample code to reproduce. And it would be helpful to know if you're seeing this behaviour with other htmlwidgets or is it unique to timevis.

[jvcasillas]

Here is a reproducible example.

---
title: "Title"
author: "Author"
date: "2018-11-21 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: assets
    css: ["hygge", "rutgers", "rutgers-fonts"]
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: "16:9"
---

# A normal slide

Some text. 

---

# A timeline

```{r}
library(timevis)
data <- data.frame(
  id      = 1:4,
  content = c("Item one", "Item two",
              "Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11",
              "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA, NA, "2016-02-04", NA)
)

timevis(data)
```

You can set eval=F in the code chunk and see how the output changes. I haven't seen this behavior with out html widgets (yet).

[daattali]

My first instinct tells me this is just a matter of CSS order, so I would guess that should happen with other htmlwidgets as well. Is that not the case?

---

Dean Attali President & CEO AttaliTech Ltd http://AttaliTech.com http://attalitech.com

On Wed, 21 Nov 2018 at 00:35, Joseph Casillas notifications@github.com wrote:

Here is a reproducible example.

---

title: "Title" author: "Author" date: "2018-11-21 (updated: r Sys.Date())" output: xaringan::moon_reader: lib_dir: assets css: ["hygge", "rutgers", "rutgers-fonts"] nature: highlightStyle: github highlightLines: true countIncrementalSlides: false ratio: "16:9"

A normal slide

Some text.

---

A timeline

library(timevis)
data <- data.frame(
  id      = 1:4,
  content = c("Item one", "Item two",
              "Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11",
              "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA, NA, "2016-02-04", NA)
)

timevis(data)

You can set eval=F in the code chunk and see how the output changes.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/daattali/timevis/issues/62#issuecomment-440537143, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6IFLjEyijadAoM7vYuiy9Mns76M4mrks5uxOYHgaJpZM4Ysaj- .

[jvcasillas]

It doesn't seem to be the case. I haven't tested many htmlwidgets, but I can add the following, for example, and still get the desired rendering.

```{r}
library(leaflet)
m = leaflet() %>% addTiles()
m  # a map with the default OSM tile layer
```

[daattali]

It looks like the difference in rendering is because of bootstrap css. Leaflet doesn't use bootstrap so the boostrap css is not loaded, but if you would use any other widget that does rely on bootstrap it should also result in the same rendering.

Luckily there is an option to remove the external css dependencies from timevis - timevis(..., loadDependencies = FALSE) but that would also remove the jQuery dependency. So you'd have to load jquery and/or bootstrap manually if you want their functionality to work. This parameter was added so that in rare cases where bootstrap or jquery cause a conflict, such as here, you would have the power to control that, but then you proceed at your own risk to ensure the functionality and looks that you want still work

[jvcasillas]

Worked like a charm. Thanks!