cssquarto

How to make nested tabs sticky in a Quarto dashboard?


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:

enter image description here

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/


Solution

  • Also apply your css to the tab content (.tab-content):

    .panel-tabset, .tab-content {
      position: sticky;
      overflow-y: scroll;
      top: 0px;
    }
    

    enter image description here