Dashboards - Column orientation with pinned toolbar on single page dashboard

[nclJoshCowley]

Description

Hi all, any help would be appreciated as always. I've just updated to Quarto v1.5.57 on Windows 10

My goal is to create a dashboard in the column orientation with a single toolbar at the top.
This would be a single page dashboard.

Consider this example, slightly modified from https://quarto.org/docs/dashboards/layout.html#orientation

---
title: "Diamonds Explorer"
format: 
  dashboard:
    orientation: columns
server: shiny
---

<!--
## {.toolbar}

```{r}
shiny::textInput("ui", "Input:")
```
-->


## Column {width=60%}

```{r}
ggplot2::qplot(-100:100, (-100:100), main = "y ~ x")
```

## Column {width=40%}

```{r}
ggplot2::qplot(-100:100, (-100:100)^2, main = "y ~ x^2")
```

```{r}
ggplot2::qplot(-100:100, (-100:100)^3, main = "y ~ x^3")
```

The HTML comment distinguishes a version with the toolbar and without.

If I wanted a toolbar here,

• Using a section 1 heading breaks the app as all content (## Column is assumed to be in the toolbar)
• Using a section 2 heading reverts the content to a "rows" orientation
• Adding a section 1 heading between the toolbar and content makes it a multipage app and adds the heading name to the navbar (acceptable but undesired)

Is it possible to have what I've described? A single page dashboard in column orientation with a toolbar fixed at the top?

[mcanouil]

As documented, columns orientation, means the default bloc is column, so no you can't have a div spreading across your columns with the exception of a header of class .toolbar (edit) but it still assumes row orientation I believe (i.e., not sure it's supposed to work with orientation "column" or even if it makes sense).

See the gallery and the documentation about toolbar: https://quarto.org/docs/dashboards/inputs.html#toolbars

Alternatively, use row orientation and split your second row into columns, etc.

Level one heading for for pages as documented: https://quarto.org/docs/dashboards/layout.html#pages

I suggest you take a second look at the documentation to understand how a dashboard is built.

Edit: strictly following documentation

---
title: "Diamonds Explorer"
format:
  dashboard: default
---

## {.toolbar}

Toolbar content

## row

### column {width=60%}

::: {#fig-1}
![]({{< placeholder 600 400 >}})

An image
:::

### Column {width=40%}

::: {#fig-2}
![]({{< placeholder 200 100 >}})

An image
:::

::: {#fig-3}
![]({{< placeholder 200 100 >}})

An image
:::

[nclJoshCowley]

I had scanned the docs (mainly those linked) but clearly haven't given them the attention they deserved.

i.e., not sure it's supposed to work with orientation "column" or even if it makes sense

I guess I was thinking of it as a navigation bar extension as opposed to a component itself.
Doesn't make sense, or is at least ambiguous, in hindsight.

Alternatively, use row orientation and split your second row into columns, etc.

This was it. Thanks for the prompt and pedagogical response as always @mcanouil

[mcanouil]

The documentation is dense. It sometimes requires to read it several times. 😉