Here is a two-column flexdashboard created with the orientation: columns
and vertical_layout: fill
options:
---
title: "flexdashboard reprex good"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(palmerpenguins)
library(tidyverse)
knitr::opts_chunk$set(echo=FALSE, warning=FALSE, message=FALSE, cache=FALSE, dev='svg')
```
Column {data-width=700}
-----------------------------------------------------------------------
### Chart Element 1
```{r, fig.width=12, fig.asp=0.4,}
penguins |>
ggplot(aes(bill_length_mm, bill_depth_mm, color = island)) +
geom_point()+
theme_minimal()
```
### Chart Element 2
```{r, fig.width=12, fig.asp=0.4}
penguins |>
ggplot(aes(bill_length_mm, bill_depth_mm, color = island)) +
geom_point()+
theme_minimal()
```
Column {data-width=200}
-----------------------------------------------------------------------
### Comments
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
When viewed in the browser (maximized to fill the screen), the two charts in the left column have the same height and width and line up perfectly. This is what I want!
Strangely though, when some more text is added to the right column, the height of each element in the left column is no longer the same, and this causes the charts to display at different sizes (must be maximized to see this). Yuck!
---
title: "flexdashboard reprex bad"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(palmerpenguins)
library(tidyverse)
knitr::opts_chunk$set(echo=FALSE, warning=FALSE, message=FALSE, cache=FALSE, dev='svg')
```
Column {data-width=700}
-----------------------------------------------------------------------
### Chart Element 1
```{r, fig.width=12, fig.asp=0.4,}
penguins |>
ggplot(aes(bill_length_mm, bill_depth_mm, color = island)) +
geom_point()+
theme_minimal()
```
### Chart Element 2
```{r, fig.width=12, fig.asp=0.4}
penguins |>
ggplot(aes(bill_length_mm, bill_depth_mm, color = island)) +
geom_point()+
theme_minimal()
```
Column {data-width=200}
-----------------------------------------------------------------------
### Comments
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Is there any way to force the two charts to display with the same height?