quarto-dev / quarto-dev/quarto-cli
Callout headers in dashboards are displayed incorrectly
Nobody has claimed this yet.
- 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
Expected behavior
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
.qmdtemplates)
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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