Whole of page tabsets result in unexpected behaviour

[tesaunders]

Description

Hi all,

Quarto version 1.6.40 on Windows 11. Love Quarto and appreciate everyone's work on it.

I'm getting some unexpected behaviour with tabsets. I'm trying to create whole-of-page tabsets which split the same content from different categories, in order to cut down on duplicated pages in the navbar. For example, instead of:

Page 1 Group A, Page 1 Group B, Page 2 Group A, Page 2 Group B, Page 3 Group A, Page 3 Group B etc

I'm trying to achieve:

Page 1, Page 2, Page 3 - where each page has 2 tabsets (one for each group) containing multiple plots or other cards.

My interpretation of the documentation is that this is possible, specifically:

In the examples above, each tab included a single card. If you want tabs to contain multiple cards, introduce another level of headings below the tabset row or column.

In the reprex below for a single page, this layout is achieved in tab 2, but I can't figure out why it is not achieved in tab 1 (the row in tab 1 takes on a column layout for some reason). Any help is greatly appreciated.

---
title: "Cars"
format: dashboard
---
    
## Row {.tabset}

### 1

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
plot(mtcars)
```

```{r}
plot(mtcars)
```

##### Column {width=50%}

```{r}
plot(mtcars)
```

### 2

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
plot(mtcars)
```

```{r}
plot(mtcars)
```

##### Column {width=50%}

```{r}
plot(mtcars)
```

[mcanouil]

You really should use empty lines around code blocks, code cells, and headings.

Is your two tabs supposed to be the same?

[mcanouil]

I believe this to be the following issue:

• Tabset (with explicit headers) breaks Row layout in dashboards #11387

[tesaunders]

Sorry this was an artifact of copying the .qmd contents from a secondary source - I'll fix it. Yes for this reprex it's fine if the content is the same.

[tesaunders]

Thanks @mcanouil - is there any kind of workaround?

[mcanouil]

Everything is in the issue.

[tesaunders]

Hi @mcanouil, I've tried to update my reprex to use cards as per the issue you linked but I'm lost. Replacing explicit headers with fenced {.card} tags introduces new layout issues. I'm not sure if it is possible to 'nest' cards within cards like my reprex, as your example in the issue uses a single code cell/card for each tab panel. Are you able to point me in the right direction? I appreciate any help you can provide.

---
title: "Cars"
format: dashboard
---
    
## Row {.tabset}

::: {.card title="tab 1"}

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
plot(mtcars)
```

```{r}
plot(mtcars)
```

##### Column {width=50%}

```{r}
plot(mtcars)
```

:::

::: {.card title="tab 2"}

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
plot(mtcars)
```

```{r}
plot(mtcars)
```

##### Column {width=50%}

```{r}
plot(mtcars)
```

:::

[tesaunders]

For the benefit of others, there is a solution on Stack Overflow that answers how to achieve what I was aiming for, by using .columns and .rows divs for defining the grid layout.