Bootstrap background not showing when printing (e.g flexdashboard)

[eamcvey]

Out of the box, pagedown::chrome_print('dashboard.html') does not print charts. (I think this means it's printing containers but not items??)

For example, this Rmd, when knitted, results in the attached pdf. test_print.pdf

---
title: "Generic Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
```

Column {data-width=650}
-----------------------------------------------------------------------

### A Plot

```{r}

mtcars %>%
  ggplot(aes(x = mpg, y = wt)) +
  geom_point()

```

Column {data-width=350}
-----------------------------------------------------------------------

### Some Text

Testing text printing too!

### Blank Chart

```{r}

```

[RLesur]

Thanks a lot for reporting this issue!

pagedown::chrome_print() does roughly the same thing as Chrome when one prints the document to PDF (Ctrl+P). If you try to print a flexdashboard by hand with Chrome, you will get the same result.

After investigation, the problem is on the flexdsahboard side: it uses the Bootstrap library and Boostrap has some CSS rules dedicated to print.

@media print {
  *, *:before, *:after {
    background: transparent !important;
    color: #000 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

IMO, this behavior should be fixed in flexdashboard.

[eamcvey]

@RLesur Thanks for looking into this! It's certainly helpful to know the root cause. I'll create an issue on the flexdashboard repo for them to consider this.

[cpsievert]

I had a look into this and it won't be as simple as removing Bootstrap's print styles, see https://github.com/rstudio/flexdashboard/issues/347#issuecomment-876629056 for more details

[cderv]

As I was looking into this for an other issue, I just wanted to add here that the bootstrap rules shown above in https://github.com/rstudio/pagedown/issues/229#issuecomment-867466182 are from boostrap 3.

With recent flexdashboard (dev version currently), bootstrap 4 can be used easily, with which it is possible to prevent addition of printing rules by Bootstrap (to use own rule for example)

---
title: "Generic Dashboard"
output: 
  flexdashboard::flex_dashboard:
    theme:
      version: 4
      enable-print-styles: false
    orientation: columns
    vertical_layout: fill
---

By doing this, this is a bit better but there are still issues as mentioned in https://github.com/rstudio/pagedown/issues/229#issuecomment-876629461

[muschellij2]

We've run into this issue as well, the rendering is better if you select the format to be "png" as opposed to a PDF. Not the solution we need yet, but it's closer. Leaving here for anyone who is running into same thing.