quarto-dev / quarto-dev/quarto-cli

Callout headers in dashboards are displayed incorrectly

Open
#13,381 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug callouts dashboards
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

Thanks for the hard work on this great tool!

When using callouts in a dashboard, the header takes up 2 or 3 lines (one each for the icon, title, and expand arrow if using collapsible callouts).

Please also see #7350 as it is related (but has been closed although it is only partially fixed).

This can easily be manually corrected by removing the html-fill-container class from the callout-header div. For example, I've been using the following bash command as a workaround:

sed -i "s/callout-header d-flex align-content-center html-fill-item html-fill-container/callout-header d-flex align-content-center html-fill-item/" FILENAME.html

Steps to reproduce
---
title: Callout Dashboard MWE
format:
 dashboard:
  embed-resources: true
---

::: {.callout-note collapse="true"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. 
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.  Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante.

:::
Actual behavior
Image
Expected behavior
Image
Your environment
  • OS: Both RHEL 8 (natively) and Debian 12 (in a container, for what it's worth)
  • IDE: N/A (server-side rendering of .qmd templates)

NB: I first noticed this using Quarto-CLI 1.7.32, but have confirmed it exists in 1.8.24 as well.

Quarto check output

Quarto 1.7.32
[✓] Checking environment information...
Quarto cache location: /home/USER/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.85.1: OK
Deno version 1.46.3: OK
Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.7.32
Path: /opt/quarto-1.7.32/bin

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

[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /bin
Version: undefined

[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /bin/google-chrome
Source: PATH

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

[✓] Checking Python 3 installation....OK
Version: 3.13.5 (Conda)
Path: /home/USER/miniconda3/bin/python
Jupyter: 5.8.1
Kernels: python3

[✓] Checking R installation...........OK
Version: 4.2.2
Path: /usr/lib64/R
LibPaths:
- /data/home/USER/R/x86_64-redhat-linux-gnu-library/4.2
- /usr/lib64/R/library
- /usr/share/R/library
knitr: (None)
rmarkdown: (None)

  The knitr package is not available in this R installation.
  Install with install.packages("knitr")
  The rmarkdown package is not available in this R installation.
  Install with install.packages("rmarkdown")

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 supplied QMD example with the Quarto dashboard format, then inspect the generated HTML around the callout-header and its dashboard layout styles. Done means the icon, title, and collapse arrow fit on one header line without requiring the reported sed workaround, while the supplied callout still behaves correctly.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.