Using crosstalk in a blogdown document causing weird CSS effect

[pssguy]

Not sure if this is a crosstalk or blogdown issue

[timelyportfolio]

possibly something here 689fa97. The css does not appear to be encapsulated, so could be affecting entire page.

[timelyportfolio]

I just found your example from the other issue. Inspecting bootstrap a little more closely, we can see

so the "downgraded" bootstrap 3.3.2 is present. Where can I find an example of the working version to compare?

[pssguy]

If you mean by working version, anything where the CSS is as expected - without crosstalk - then any other post on that site for example will do

[timelyportfolio]

ok, then I thought it was a bootstrap version issue, but this appears to just be a bootstrap existence issue. See if this helps.

library(crosstalk)
library(htmltools)

sd <- SharedData$new(mtcars)

fs <- filter_select(
  id = "crosstalk-fs",
  label = "Select # of Cylinders",
  sharedData = sd,
  group = ~cyl 
)

browsable(
  tagList(
    h1("Test"),
    fs
  )
)

# now let's get rid of the bootstrap dependencies

# use suppressDependencies to get rid of bootstrap
# note: this works for the entire list of tags
#   so will probably be better
browsable(
  tagList(
    h1("Test"),
    fs,
    suppressDependencies("bootstrap")
  )
)

# we canmanually remove bootstrap dependency on just fs
fs_nobootstrap <- fs

attr(fs_nobootstrap, "html_dependencies") <- Filter(
  function(dep) {dep$name != "bootstrap"},
  attr(fs_nobootstrap, "html_dependencies")   
)

browsable(
  tagList(
    h1("Test"),
    fs_nobootstrap
  )
)

[pssguy]

@timelyportfolio Thanks for this but hitting problem when attempting to render the site. document is Cross.Rmd

{r }
library(crosstalk)
library(htmltools)

sd <- SharedData$new(mtcars)

fs <- filter_select(
  id = "crosstalk-fs",
  label = "Select # of Cylinders",
  sharedData = sd,
  group = ~cyl 
)

  tagList(
    h1("Test"),
    fs,
    suppressDependencies("bootstrap")
  )

 serve_site()
Error: path for html_dependency not provided
Execution halted
Error in render_page(f) : Failed to render 'Cross.Rmd'
In addition: Warning message:
running command '"C:/PROGRA~1/R/R-33~1.1/bin/x64/Rscript" "C:/Users/Andrew/Documents/R/win-library/3.3/blogdown/scripts/render_page.R" "Cross.Rmd"' had status 1 

[timelyportfolio]

I forgot that rmarkdown checks for valid path, and suppressDependencies works by changing the path to NULL, which of course is not valid. Can you try option #2? If it works, we can wrap in a simple function.

[timelyportfolio]

It seems like a set of non-Bootstrap controls would be a welcome addition to the R crosstalk family.

[pssguy]

The alternative - does appear to work. I have yet to try it out on a real-world app but will get to later in day

fs_nobootstrap <- fs

attr(fs_nobootstrap, "html_dependencies") <- Filter(
  function(dep) {dep$name != "bootstrap"},
  attr(fs_nobootstrap, "html_dependencies")
)

  tagList(
    h1("Test"),
    fs_nobootstrap
  )

This is the sort of article I would want it applied to
Thanks for your help