How to make dashboard grid only fit by width not by width and height?

[Justype]

Description

I want to print a grid of plots. But the number is not constant. I want it to flow instead of fill.

• I tried adding .flow. It's even worse.
• scrolling="true" also not working

---
title: "Dashboard Test"
format:
  dashboard:
    embed-resources: true
---

```{r setup}
library(dplyr)
knit_plot <- function(code, width = 5, height = 3) {
  knitr::knit_expand(text = '
\`\`\`{r}
#| fig-width: {{width}}
#| fig-height: {{height}}
{{code}}
\`\`\`
', width = width, height = height, code = code)
}
```

# Direct Plot (only 1 plot)

## Variable Number of Plots to Compare

```{r try 1}
#| fig-width: 6
#| fig-height: 6
#| layout-ncol: 5
for (i in 1:25) {
  plot(iris$Petal.Length, iris$Petal.Width)
}
```

# Plots by Grid (fit)

## Variable Number of Plots to Compare

::: {.grid layout-ncol=5}

```{r try 2}
#| output: asis
1:25 %>% 
  lapply(function(x) knit_plot("plot(iris$Petal.Length, iris$Petal.Width)", width=6, height=6)) %>% 
  paste(collapse = '\n') %>%
  knitr::knit(text = ., quiet = TRUE) %>% cat
```

:::

# Plots by Grid (flow)

## Variable Number of Plots to Compare

::: {.grid .flow layout-ncol=5}

```{r try 3}
#| output: asis
1:25 %>% 
  lapply(function(x) knit_plot("plot(iris$Petal.Length, iris$Petal.Width)", width=6, height=6)) %>% 
  paste(collapse = '\n') %>%
  knitr::knit(text = ., quiet = TRUE) %>% cat
```

:::

Grid Output

.flow Output

Too small to see.

[mcanouil]

Is all this gibberish R code really necessary? Could you not use lipsum and/or placeholder shortcode? https://quarto.org/docs/authoring/shortcodes.html

Also, not (again) that Quarto (even RMarkdown/knitr) recommends to not mix R code cell options syntax. It's pretty simple in Quarto: put nothing but languages inside the brackets. If you want a label use the label code cell option.

Please double check the documentation about fill versus flow: https://quarto.org/docs/dashboards/layout.html

[Justype]

I tried. But they behaved differently?

---
title: "Test"
format: dashboard
---

# Plots {.columns}

##

![Plots to compare]({{< placeholder 400 1200 >}})

##

```{r}
#|fig-width: 4
#|fig-height: 12
plot(iris$Petal.Length, iris$Petal.Width)
```

[mcanouil]

How so? In one you added a caption and not in the other. In one you set size in pixels while the other is set in inches using the default DPI. What beyond that does not behave the same?

Note that using HTML formats and wanting to customise layout often requires to know how it works.
For that you need two things, one is from Quarto, the other is "usual" HTML tools:

• use keep-md: true to inspect the intermediate markdown file when using computations
• use your favourite browser developer/inspect mode or any IDE, to investigate the HTML code.

[Justype]

Change .grid to .flow will achieve my goal.

I need to learn more about quarto doc and web tech.

https://quarto.org/docs/authoring/figures.html#multiple-rows

[mcanouil]

Glad you figured it out!

The documentation is quite dense so several reading might be needed. 😉