quarto-dev / quarto-dev/quarto-cli

strange behavior when toc-location is left

Open
#11,770 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug html layout
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

i'm not sure if some of this behavior is intentional, but it seemed a bit odd to me.

i have a quarto website where toc-location is set to left. for certain pages (for example, about), i don't need a toc and so i turn it off in the page specific yaml. in doing this, i noticed that the page content became noticeably off-centered to the right:
Image

i realized that this is because setting the page specific toc to false removes the quarto-margin-sidebar (where a toc on the right would normally appear) but not the quarto-sidebar that is added when toc-location: left (see image below). this would explain why removing the page specific toc on a website with toc-location: right leaves the resulting content centered (expected behavior) but a page with toc-location: left does not (unexpected behavior).
Image

in full honesty, i actually expected that when toc-location: left the quarto-margin-sidebar would simply be moved to the left side of the page rather than having a second sidebar added instead. the current system causes content to be centered in a different way on pages with left hand vs right hand tocs even on the pages where the toc is present, which seems a bit surprising.

is this behavior expected?

Steps to reproduce

files to reproduce the above screenshot example.

index.qmd:

---
title: "Example"
toc: false
---

Lorem ipsum odor amet, consectetuer adipiscing elit. Integer eleifend eu pretium curabitur posuere ante hac. Justo rutrum interdum in faucibus curabitur litora justo nibh pretium. Nisl nisi erat ullamcorper sodales curae. Lectus vestibulum proin accumsan placerat etiam lectus lacinia mattis. Mus montes convallis faucibus maximus integer accumsan. Parturient maecenas at felis posuere suspendisse tellus ultricies euismod. Fermentum vestibulum platea justo potenti; vestibulum natoque adipiscing. Egestas vel suscipit et diam diam nullam egestas dolor.

_quarto.yml:

project:
  type: website

website:
  title: "sidebar_example"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    theme: cosmo
    toc: true
    toc-location: left
Expected behavior

by default i would expect that setting toc-location: left moves quarto-margin-sidebar to the left side of the page rather than adding a second sidebar. even if adding a second sidebar is deliberate, i would expect that toc: false on a specific page removes both sidebars to produce an output equivalent to having toc: false on a page of website where toc-location: right.

Actual behavior

moving toc-location to the left (for overall website) adds a second sidebar on the left side of the page rather than moving the existing sidebar to the left. when toc: false for a specific page on a website with left-hand side tocs only the right hand sidebar is removed, resulting in off-center page content.

Your environment
  • ide: vim 8.1 (rendering done in terminal)
  • os: linux ubuntu 20.04
  • quarto: 1.6.39
Quarto check output

Image

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

Use the provided index.qmd and _quarto.yml reproduction with toc-location: left and a page-level toc: false. Render the site with Quarto and inspect the generated layout to determine why the left sidebar remains; done means disabling the page table of contents removes both sidebars and keeps the content centered.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.