z-index set by Quarto breaks modals when `page-layout: full`

Open
#12,303 2 comments 1 reaction 1 assignee View on GitHub

@cderv is already working on this.

Since Mar 18, 2025.

Assessment

This issue has not been assessed yet.

Description

bug html layout themes
Bug description

Quarto sets various SASS variables to redefine z-index of several Bootstrap components

But either something is wrongly set or is not set for when page-layout: full.

Steps to reproduce
---
title: "Reproducible Quarto Document"
format: html
page-layout: full
engine: markdown
---

Here is a modal:

```{=html}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```

{{< lipsum 1 >}}
Actual behavior

https://github.com/user-attachments/assets/1248829b-6f70-40c7-a0c4-1711516f2b6d

Expected behavior

https://github.com/user-attachments/assets/35e64eb3-2b47-4016-9fb2-04d84cbdee4c

Your environment

No response

Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: c1c5a4308f77fa2674082f41be12446cdcf415fd
      Path: /Users/mcanouil/Projects/quarto/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2025.03
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
      Source: QUARTO_CHROMIUM

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: /Users/mcanouil/Projects/quarto/quarto-playground/.venv/bin/python3
      Jupyter: 5.7.2
      Kernels: julia-1.11, python3

[✓] Checking Jupyter engine render....OK

(/) Checking R installation...........ℹ R version 4.4.3 (2025-02-28)
! Config '~/.Rprofile' was loaded!
[✓] Checking R installation...........OK
      Version: 4.4.3
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/mcanouil/Projects/quarto/quarto-playground/renv/library/macos/R-4.4/aarch64-apple-darwin20
        - /Users/mcanouil/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.4/aarch64-apple-darwin20/f7156815
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

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.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.