Combine in flexdashboard with multiple pages of different types vertical_layout
I created a flexdashboard document that has multiple pages. I would like to see the first page vetical_layout: fill
, but the second page I would like 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 from vertical_layout: scroll
?
source to share
You can override the global value vertical_layout
in a separate column (H2).
---
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 global values. (But in this case , they change the orientation at the page level (H1)).
source to share
The following solution worked for me. In the YAML header, I am using "vertical_layout: fill" to set the default "fill" behavior. Then I am using the CSS below 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}
```
source to share