I created a flexdashboard document that has multiple pages. I would like that on the first page the vetical_layout: fill but on the second page I would like that vertical_layout: scroll. My document starts like this:
---
title: "DASHBOARD"
output:
flexdashboard::flex_dashboard:
orientation: columns
logo: logo.png
vertical_layout: fill
---
How can I see the second page with the vertical_layout: scroll?
You can override the global vertical_layout value on an individual (H2) column.
---
title: "Changing Vertical Layout"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
```
Page 1
================================
Column {data-width=650}
-----------------------------------------------------------------------
### Panel A
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Panel B
```{r}
qplot(cars$speed)
```
### Panel C
```{r}
qplot(cars$dist)
```
Page 2
================================
Column { vertical_layout: scroll}
-----------------------------------------------------------------------
### Panel A
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
Here's a similar example of overriding the global values. (But in this case, they're changing the orientation at the page (H1) level).
The following solution worked for me. In the YAML header, I use "vertical_layout: fill" to set the default behavior to "fill." I then use the below CSS styling in the Page header and Column header for the page that needs to scroll.
Page 3 {style="position:relative;"}
========================================================
Column {style="height:100pc;"}
--------------------------------------------------------
### Chart A
``` {r}
```
### Chart B
``` {r}
```
