quarto-dev / quarto-dev/quarto-cli

Sidebar doesn't respect z-index

Open
#13,786 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug layout themes upstream
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:

Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.