How to set dashboard tabset padding using markdown header?

[Justype]

Description

Quarto version: 1.5.57

What I want to do:

1. Put plots in tabset.
2. Plot is expandable.
3. Set tabset padding to 0.

What I tried:

Code	Problems
set title in code chunk	will expand whole tabset with the header/title
wrap output chunk with another element	1. will show 2 expand button 2. cannot set padding of tabset element
global disable expandable, set expandable in code chunk	cannot set padding of outer tabset.

set title in code chunk

---
title: "UMAPs"
format:
  dashboard:
    self-contained: true
---

# UMAPs
## {.tabset}
```{r fig.width=14, fig.height=6}
#| title: "Sample Cluster"
UMAPPlot(so, group.by = args$sample_column) + UMAPPlot(so)
```
```{r fig.width=14, fig.height=6}
#| title: "972 Subset"
UMAPPlot(so_972, group.by = "sample_new") + (UMAPPlot(so_972) + ggtitle("972 - 0.5 resolution"))
```

Output

wrap output chunk with another element

---
title: "UMAPs"
format:
  dashboard:
    self-contained: true
---

# UMAPs
## {.tabset expandable=false padding=0px}
### Sample Cluster {expandable=false padding=0px}
```{r fig.width=14, fig.height=6}
UMAPPlot(so, group.by = args$sample_column) + UMAPPlot(so)
```
### 972 Subset
```{r fig.width=14, fig.height=6}
UMAPPlot(so_972, group.by = "sample_new") + (UMAPPlot(so_972) + ggtitle("972 - 0.5 resolution"))
```

Output

## {.tabset expandable=false padding=0px} not working.

global disable expandable, set expandable in code chunk

---
title: "UMAPs"
format:
  dashboard:
    self-contained: true
    expandable: false
---

# UMAPs
## {.tabset expandable=false padding=0px}
### Sample Cluster {expandable=false padding=0px}
```{r fig.width=14, fig.height=6}
#| expandable: true
UMAPPlot(so, group.by = args$sample_column) + UMAPPlot(so)
```
### 972 Subset
```{r fig.width=14, fig.height=6}
#| expandable: true
UMAPPlot(so_972, group.by = "sample_new") + (UMAPPlot(so_972) + ggtitle("972 - 0.5 resolution"))
```

It kind of works. But I still cannot remove the padding of the tabset.

Any suggestions? Thanks ahead.

[mcanouil]

Accessibility: Could you make the title of your post readable (avoid code in it as it won't be read as such, and it makes search difficult)? Thank you.

[Justype]

I changed the title. Thanks for your suggestion.

[Justype]

My goal is solved by using inline CSS and JS.

1. remove tabset padding if it has card children. (using CSS)
2. remove tabset expand tool if it has card children. (using JS)

<style>
.tabset.card:has(.card) {
    --bs-card-spacer-y: 0rem;
    --bs-card-spacer-x: 0rem;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".tabset.card").forEach(tabset => {
        if (tabset.querySelector(".card")) {
            tabset.querySelectorAll(":scope > bslib-tooltip").forEach(tooltip => {
                tooltip.remove();
            });
        }
    });
});
</script>

[mcanouil]

Glad you've found a way!

Few notes about your document:

• It's not reproducible so nobody can use it.

• It requires an heavy R dependency that most won't want to install.

• Use the placeholder and lipsum shortcodes which are there precisely to avoid unnecessary dependencies: https://quarto.org/docs/authoring/shortcodes.html

• self-contained is a more than 2-years old outdated option that is not even documented or auto-completed now. You should use embed-resources.

• You should add empty lines around headings, code cells, and list.

• You should not mix knitr code cell option syntax, i.e., you are using R inline and YAML syntax. Quarto uses and recommends YAML (nothing but the language between the brackets):

  ```{r fig.width=14, fig.height=6}
  #| expandable: true

  should be:

  ```{r}
  #| fig-width: 14
  #| fig-height: 6
  #| expandable: true

• ### Sample Cluster {expandable=false padding=0px} this is not valid. Elements inside the brackets need to be either Quarto features or valid HTML attributes. padding is not an HTML attribute, but style is, so ### Sample Cluster {expandable=false style="padding: 0;"} has better chances to work.

[Justype]

Thanks a lot. I will use Iris as an example next time.

[mcanouil]

You don't even need R here: {{< placeholder >}} or {{< lipsum >}} would populate the cards just fine.