html - Plotly legend get trimmed off in the R Markdown Html template with tabset

Question

I am trying to using tabset and iframe together in R markdown template

Here is the code

---
title: "A"
output: 
  html_document:
    self_contained: false
    lib_dir: libs

---
```{r}
library(plotly)
p <- plot_ly(mtcars, x = ~cyl, y = ~mpg, split = ~cyl, type = "violin", showlegend = TRUE)
htmlwidgets::saveWidget(p, file = "p.html", selfcontained = F)
```

## {.tabset .tabset-fade}
### X {.tabset .tabset-fade}
#### Q
```{r, echo=FALSE}
htmltools::tags$iframe(
  src = "./p.html",
  frameBorder = "0",
  width = "80%",
  height = "500"
)
```
 
#### W
```{r, echo=FALSE}
htmltools::tags$iframe(
  src = "./p.html",
  frameBorder = "0",
  width = "80%",
  height = "500"
)
```

The plotly widget in the first tab always look ok (Tab X, sub-tab Q)

However, the legend of the second tab always get cut off. (Tab X, sub-tab W)

These only happen in MacOS/Chrome but looks normal in MacOS/Safari.

Any idea of why these might happen?

---

Update

I think it has something to do with div’s display:none. Similar issue.

Possible solution? But no idea how to implement in R markdown.

---

Update possible solution

Try adding this to the beginning of R markdown. I think it works now!

```{css, echo=FALSE}
.tab-content>.tab-pane {
    display: block;
    height: 0px;
    overflow: hidden;
    padding: 0px
}
.tab-content>.active {
    display: block;
    height: auto;
    padding: 12px
}
```

Thanks to the discussion Here.

标签： htmlcssrplotlyr-markdown