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 control the layout of a page (= header 1, i.e. #Page 1) by defining a 2nd level header, i.e. ## Row ------ or ## Column -----. The actual flexdashboard "panels" are 3rd level headings, e.g. ### Picture top left.
The vertical layout for a dashboard may be set in the YAML header with either "vertical_layout: fill" or "vertical_layout: scroll." For multi-page dashboards, however, is it possible to set some pages to "fill" and others to "scroll?"
By default flexdashboard charts are laid out to automatically fill the height of the browser. This works well for a small number of vertically stacked charts, however if you have lots of charts you’ll probably want to scroll rather than fit them all onto the page.
For mobile phones (any screen less than or equal to 768 pixels wide) flexdashboard uses special layout behavior. Since these screens don’t generally have the width to show multiple side-by-side columns, all dashboard components are “flattened” into one single column layout.
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}
```
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With