quarto-dev / quarto-dev/quarto-cli
Sidebar doesn't respect z-index
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
When a document includes a sidebar and a full screen element that overlaps it, sidebar elements with be rendered over the full screen element, even when its z-index is manually set high. I've tried playing with the CSS a bit, but couldn't find a workaround.
Screenshot of reprex:
Steps to reproduce
---
title: "Leaflet Sidebar Issue Reprex"
format:
html:
grid:
body-width: 1500px
sidebar-width: 300px
toc: true
page-layout: full
---
```{r}
#| warning: false
library(leaflet)
library(bslib)
# Create a simple leaflet map
map <- leaflet() |>
addProviderTiles(providers$CartoDB.Positron) |>
addCircleMarkers(
lng = c(10.7522, 5.7339),
lat = c(59.9139, 58.9700),
popup = c("Oslo", "Stavanger"),
radius = 10,
fillOpacity = 0.7
)
# Wrap in bslib card with full_screen option
bslib::card(
full_screen = TRUE,
map,
style = "text-align: left; z-index: 999999;"
)
```
# Section
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
# Section
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
# Section
# Section
# Section
# Section
# Section
Actual behavior
TOC renders over full screen element.
Expected behavior
Full screen element renders over TOC/Sidebar.
Your environment
- IDE: Positron 2025.12.1 (user setup) build 4
- OS: Windows 11
Quarto check output
PS C:\Users\SAW\Local Documents\EXPECT AEP\EXPECT_AEP_R_Project> quarto check
Quarto 1.8.26
[>] Checking environment information...
Quarto cache location: C:\Users\SAW\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.3.1: OK
Typst version 0.13.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.8.26
Path: C:\Users\SAW\AppData\Local\Programs\Quarto\bin
CodePage: 1252
[>] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
[>] Checking LaTeX....................OK
Tex: (not detected)
[>] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: C:\Program Files\Google\Chrome\Application\chrome.exe
Source: Windows Registry
[>] Checking basic markdown render....OK
[>] Checking Python 3 installation....OK
Version: 3.12.10
Path: C:/Python312/python.exe
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with python -m pip install jupyter
[>] Checking R installation...........OK
Version: 4.5.2
Path: C:/PROGRA1/R/R-451.2
LibPaths:
- C:/Users/SAW/AppData/Local/R/win-library/4.5
- C:/Program Files/R/R-4.5.2/library
knitr: 1.50
rmarkdown: 2.30
[>] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by rendering the provided Quarto document with the Leaflet map and bslib full-screen card, then inspect the generated HTML and CSS stacking behavior around the table of contents sidebar. The fix is complete when the full-screen element renders above the TOC despite the sidebar being present.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100