Using crosstalk filters disrupt Distill css theming?

[mfherman]

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>.

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>.

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.

[apreshill]

Hi there!

I have a hypothesis 😄 I believe filter_select() introduces bootstrap, since the docs state: https://rdrr.io/cran/crosstalk/man/filter_select.html

"Creates a select box or list of checkboxes"

I believe crosstalk will bring in bootstrap if you use:

• [x] checkboxes
• [x] select
• [x] bscols (predictably!)

But not:

• [ ] sliders

[mfherman]

Yes, that makes sense! I'm not seeing the issue just using filter_slider():

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

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

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

shared_iris <- SharedData$new(iris)

filter_slider(
  id = "sepal",
  label = "Sepal Lenth",
  sharedData = shared_iris,
  column = ~Sepal.Length
)
```

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>.

So given that bootstrap appears to be the culprit, is there a way to have it not interfere with the distill formatting or do bootstrap and distill just not play well together?

[apreshill]

Bootstrap in general clobbers all site-level styling. It happens with every blogdown site (not based on bootstrap) as well. I suspect an immediate workaround involves iframes.

[mfherman]

Got it! I'll poke around and see what I can make work for now.

[werkstattcodes]

Got it! I'll poke around and see what I can make work for now.

I ran into a similar issue and this helped me: https://github.com/rstudio/crosstalk/issues/26

[dzulfiqarfr]

The unstrap() function from govdown can help. Worked for me. 👍🏽

More: https://rdrr.io/cran/govdown/man/unstrap.html

[apreshill]

Hii @mfherman and others in this thread: we have worked to remove the Bootstrap dependency of crosstalk - please give it a try again in distill!

https://github.com/rstudio/crosstalk/blob/master/NEWS.md#crosstalk-1119000

remotes::install_github("rstudio/crosstalk")

[dzulfiqarfr]

Hii @mfherman and others in this thread: we have worked to remove the Bootstrap dependency of crosstalk - please give it a try again in distill!

https://github.com/rstudio/crosstalk/blob/master/NEWS.md#crosstalk-1119000

remotes::install_github("rstudio/crosstalk")

I've tried it (locally) and it was very neat. Thanks!