CODEWITHSUNDEEP
rlayoutr-markdownflexdashboard
mrina713
mrina713

Reputation: 527

Combine in flexdashboard with multiple pages different types of vertical_layout

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?

Upvotes: 11

Views: 7662

Answers (2)

M.Smith
M.Smith

Reputation: 31

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}
```

Upvotes: 3

wibeasley
wibeasley

Reputation: 5297

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)
```

enter image description here enter image description here Here's a similar example of overriding the global values. (But in this case, they're changing the orientation at the page (H1) level).

Upvotes: 13

Related Questions