distill icon indicating copy to clipboard operation
distill copied to clipboard

Using crosstalk filters disrupt Distill css theming?

Open mfherman opened this issue 3 years ago • 8 comments

I noticed this issue when trying to use crosstalk with Leaflet and DT in a distill article. I'm not savvy enough to figure out where in the HTML or CSS the problem is introduced, but it appears that when using a filter_* function from crosstalk, the formatting (font, text size, in particular) in the rest of distill article changes. I'm not sure if this issue belongs here or in crosstalk, but I haven't had the same issue when using crosstalk filters with other R Markdown templates.

Here are two sample Rmds that exhibit the behavior. The first is the default distill output:

---
title: "No Crosstalk Distill"
output: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

Distill is a publication format for scientific and technical writing, native to the web. 

Learn more about using Distill for R Markdown at <https://rstudio.github.io/distill>.

image

And the second adds a select filter from crosstalk:

---
title: "Crosstalk Distill"
output: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{r, eval=TRUE}
library(crosstalk)

shared_iris <- SharedData$new(iris)

filter_select(
  id = "species",
  label = "Species",
  sharedData = shared_iris,
  group = ~Species
)
```

Distill is a publication format for scientific and technical writing, native to the web. 

Learn more about using Distill for R Markdown at <https://rstudio.github.io/distill>.

image

I've also noticed this behavior elsewhere, so I don't think it is limited to my configuration. For example, on @jthomasmock's distill blog, his post using crosstalk has similar formatting issues that aren't present in his other blog posts.

mfherman avatar Dec 30 '20 15:12 mfherman