Controlling the height of column elements in a flexdashboard

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?

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.