I'm creating a Quarto dashboard with a nested tabs. When the output is pretty long I would like to have the nested tabs to be sticky at the top, so when you scroll down you can still see the tabs. Currently I'm using .panel-tabset
css to make the tab sticky, but this only make the upper tab sticky and not the lower tab sticky. I want to have the complete nested tabs sticky. Here a simple reproducible example:
---
title: "test"
format: dashboard
editor: visual
---
# Test
```{css, echo=FALSE}
.panel-tabset {
position: sticky;
overflow-y: scroll;
top: 0px;
}
```
```{r, include=FALSE}
# Init Step to make sure that the dependencies are loaded
htmltools::tagList(plotly::ggplotly(ggplot2::ggplot()))
```
```{r}
#| echo: false
#| message: false
#| warning: false
library(ggplot2)
library(plotly)
# example list
example_list <- list(
tab1 = list(test1.1 = ggplotly(ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width))+
geom_point()),
test1.2 = ggplotly(ggplot(iris, aes(x = Petal.Length, y = Sepal.Width))+
geom_point())),
tab2 = list(test2 = ggplot(mtcars, aes(x = mpg, y = qsec))+
geom_point() +
facet_wrap(~carb, ncol = 1))
)
# function
nested_tabs <- function(nested_list) {
main_tab <- names(nested_list)
cat(':::: {.panel-tabset} \n') # main tab
for (i in main_tab) {
id <- which(main_tab == i)
cat("##", as.character(i), "\n\n")
cat("::: {.panel-tabset} \n\n") # sub tab
purrr::iwalk(example_list[[i]], ~ { # source: https://stackoverflow.com/a/73368297/28479453
cat('###', .y, '\n\n')
print(.x)
cat('\n\n')
})
cat("\n:::\n\n")
}
cat("::::")
}
```
```{r}
#| results: asis
#| echo: false
#| message: false
#| warning: false
#| fig-width: 14
#| fig-height: 20
nested_tabs(example_list)
```
Output:
On tab2 test2 you can see when you scroll down, only tab2 stays sticky while I also want test2 to be sticky. So I was wondering how we can make nested tabs to be sticky in a Quarto dashboard/
Also apply your css to the tab content (.tab-content
):
.panel-tabset, .tab-content {
position: sticky;
overflow-y: scroll;
top: 0px;
}