quarto-dev / quarto-dev/quarto-cli

[manuscript/html] column-margin code blocks overlaid by subsequent content in article notebook

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

Nobody has claimed this yet.

bug layout manuscript
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 using div containers with class .column-margin in index.qmd of manuscript projects, these containers are overlaid by subsequent content in the article notebook html output (i.e. the index-preview.html).

In the index.html, the respective container is properly moved to the margin, as expected. In the article notebook that contains the manuscript's computations (index-preview.html), the container is not moved to the margin but still has class="no-row-height", causing it to reside in the main content's column but with no row-height.

In essence, the respective <div> container has classes no-row-height column-margin column-container in the main index.html, but only no-row-height in the index-preview.html.

Same behavior for both quarto 1.8.26 and quarto 1.9.11.

index.html index-preview.html
manuscript index.html showing the blocks properly moved to margin article notebook showing the overlaid blocks

index.html

<div class="no-row-height column-margin column-container"><div class="">
<div class="cell">
<div class="cell-output cell-output-stdout">
<pre><code>[1] "Moved to margin. \n This is overlaid by following content in Article Notebook since it is not moved to margin there."</code></pre>
</div>
</div>
</div></div>

index-preview.html

<div class="no-row-height"><div class="">
<div class="cell-container"><div class="cell-decorator"><pre>In [2]:</pre></div><div class="cell">
<div class="code-copy-outer-scaffold"><div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-overflow-wrap code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">cat</span>(<span class="st">"Moved to margin.</span><span class="sc">\n</span><span class="st">This is overlaid by following content in Article Notebook since it is not moved to margin there."</span>)</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
<div class="cell-output cell-output-stdout">
<pre><code>Moved to margin.
This is overlaid by following content in Article Notebook since it is not moved to margin there.</code></pre>
</div>
</div></div>
</div></div>
Steps to reproduce
  1. Create a blank manuscript project:
    quarto create project manuscript
    
  2. index.qmd:
    ---
    title: manuscript-margin-reprex
    authors:
      - name: Norah Jones
        affiliation: The University
        roles: writing
        corresponding: true
    bibliography: references.bib
    ---
     
    ## Section
    This is a simple placeholder for the manuscript's main document [@knuth84].
     
    ```{r}
    cat("This is a code block")
    ```
    
    :::{.column-margin}
    ```{r}
    #| code-overflow: wrap
    cat("Moved to margin.\nThis is overlaid by following content in Article Notebook since it is not moved to margin there.")
    ```
    :::
    
    ```{r}
    cat("Not margin.")
    ```
    
  3. _quarto.yml:
    project:
      type: manuscript
    
    manuscript:
      article: index.qmd
    
    format: html
    
    execute:
      freeze: true
    
Actual behavior

.column-margin containers are overlaid by subsequent content in the article notebook (i.e. the index-preview.html) of a manuscript project.

article notebook showing the overlaid blocks
Expected behavior

No overlaid blocks:

  • Either, respective blocks are actually moved to the margin
  • Or, respective blocks are displayed in the regular content flow of quarto-document-content container, e.g. by removing class no-row-height for div-containers with .column-margin in article notebooks (index-preview.html):
    article notebook with blocks not overlaid
Your environment
  • IDE: Positron 2025.11.0 build 234
  • OS: Windows 11
  • quarto: 1.8.26 (also tested with 1.9.11)
Quarto check output
Quarto 1.8.26
[>] Checking environment information...
      Quarto cache location: C:\Users\redacted\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\redacted\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2025.10
      Chromium: 869685

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\redacted\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2025

[>] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
      Source: Windows Registry

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

[>] Checking Python 3 installation....OK
      Version: 3.14.0
      Path: C:/Users/redacted/AppData/Local/Python/pythoncore-3.14-64/python.exe
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with py -m pip install jupyter

[>] Checking R installation...........OK
      Version: 4.5.0
      Path: C:/Users/redacted/AppData/Local/Programs/R/R-4.5.0
      LibPaths:
        - C:/Users/redacted/AppData/Local/Programs/R/R-4.5.0/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

Reproduce the manuscript project from the issue using _index.qmd and _quarto.yml, then compare _index.html with _index-preview.html. Start by tracing how .column-margin and no-row-height are assigned in the article notebook output. Done means margin blocks are no longer overlaid, either by moving them to the margin or keeping them in normal content flow.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
tooling, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.