Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mcanouil opened this issue Nov 13, 2024 · 2 comments
Open

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

mcanouil opened this issue Nov 13, 2024 · 2 comments
Labels
bug Something isn't working dashboards tabsets
Milestone

Comments

@mcanouil
Copy link
Collaborator

Take the following code, the use of tabset breaks the row layout.
The "column" in the second "row" is no longer handle properly.

InputOutput
---
title: "Quarto Playground"
format: dashboard
---

## Row

### Column {.tabset}

#### Tab 1

{{< lipsum 1 >}}

#### Tab 2

{{< lipsum 1 >}}

### Column

{{< placeholder >}}

## Row

### Column {.tabset}

#### Tab 1

{{< lipsum 1 >}}

#### Tab 2

{{< lipsum 1 >}}

### Column

{{< placeholder >}}
image

Originally posted by @mcanouil in #11374 (comment)

@mcanouil mcanouil added bug Something isn't working tabsets dashboards labels Nov 13, 2024
@mcanouil mcanouil changed the title Tabset breaks Row layout in dashboards Tabset (with explicit headers) breaks Row layout in dashboards Nov 13, 2024
@mcanouil
Copy link
Collaborator Author

The issue/confusion here comes from the difference with standard HTML formats.
Contrary to those, dashboard may seem to work by defining tab panels using explicit headers but it actually does not.
Instead, .card should be used.

So, it might not be considered a bug per se, but very likely to bit many users as is.

InputOutput
---
title: "Quarto Playground"
format: dashboard
---

## Row

### Column {.tabset}

::: {.card title="Tab 1"}
{{< lipsum 1 >}}
:::

::: {.card title="Tab 2"}
{{< lipsum 1 >}}
:::

### Column

{{< placeholder >}}

## Row

### Column {.tabset}

::: {.card title="Tab 1"}
{{< lipsum 1 >}}
:::

::: {.card title="Tab 2"}
{{< lipsum 1 >}}
:::

### Column

{{< placeholder >}}

Image

@mcanouil
Copy link
Collaborator Author

The documentation on this is not that clear in https://quarto.org/docs/dashboards/layout.html#tabsets especially the last part of the section.

It seems to imply that the component "unit" is the cards and that code-cells are basically cards but I can't find any explicit mention of that.

@cderv cderv added this to the v1.7 milestone Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dashboards tabsets
Projects
None yet
Development

No branches or pull requests

2 participants