Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 688
mrina713 Avatar asked Apr 05 '17 07:04

mrina713


People also ask

How do I control the layout of a flexdashboard?

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.

How do I set the vertical layout for a multi-page dashboard?

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?"

How are flexdashboard charts laid out?

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.

Why is my flexdashboard not showing all the columns?

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.


Video Answer


2 Answers

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

like image 51
wibeasley Avatar answered Oct 02 '22 18:10

wibeasley


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}
```
like image 33
M.Smith Avatar answered Oct 02 '22 20:10

M.Smith