Add css class to cell in R flexdashboard

user_1612892 0
Viewed 199

I would like to add a css class to a specific cell in my flexdashboard so that a large image is not rescaled and can be scrolled down on the y-axis.

I tried to add a custom css class to the code chunk via class.source="yscrollable" (based on this tutorial) without success. class.output="yscrollable" or class="yscrollable" do not work either. Moreover, the css class does not even show up in the html/css output.

This is my script so far:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

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

<style>
.yscrollable {
  overflow-y: scroll !important;
}
</style>

# Section
## Column
### Cell
```{r class.source="yscrollable", fig.height=20}
plot(1:100)
```

enter image description here

I am aware I could set vertical_layout = scroll, but my point is to modify a single cell.

Note: For some reason, when I reduce my web browser window size, a y-scroll shows up and the figure is displayed in its original scale.

enter image description here

flexdashboard r css
2 Answers

I'm not sure if this is suitable, but you could use Javascript and a div element. This method uses CSS-assigned attributes that flexdashbaord comes with.

You can't assign a class name to a chunk that isn't strictly text; you could add a tag with a class name. The classes flowing-content-shim and flowing-content-container are methods in which specific tables are not resized with flexdashboard. However, these need to be assigned to the parent of the plot call.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
---
  
```{r setup,include=FALSE}
library(flexdashboard)
```

# Section
## Column
### Cell

```{js}
var container = .dontDoIt.parentNode;
container.addClass('flowing-content-shim');
container.addClass('flowing-content-container');
```

<div class="dontDoIt">

```{r tellMe,fig.height=20,fig.show="asis"}
plot(1:100)
```

</div>

## Column
### Cell


```{r tellMe2,fig.height=20}
plot(1:100)
```

I added the same plot two times, in two separate columns so you could see what happened. The first uses the Javascript calls; the second one does not.

enter image description here

When you render a plot in RMarkdown, it becomes a png before it's an HTML page. Therefore, to control the height, you may need to just use HTML. If you are set on 20", then 20*96 px will get you there (96 px in an inch).

For example:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
---
  
```{r setup,include=FALSE}
library(flexdashboard)
```

# Section
## Column
### Cell

<div style="height:20*96px">

```{r tellMe,fig.height=20}
plot(1:100)
```
</div>

enter image description here enter image description here

user_53290730

The following should allow you to add a class to a cell:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

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

<style>
.yscrollable {
  overflow-y: scroll !important;
}
</style>

# Section
## Column
### Cell {class="yscrollable"}
```{r}
plot(1:100)
```

You can confirm that the class has indeed been added to the cell:

user_142841800
Related