quarto-dev / quarto-dev/quarto-cli
Value boxes in column-based dashboard get squished
@cscheid is already working on this.
Since Jul 18, 2024.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
I found a curious problem. I need to create a particular dashboard with column layout, multiple pages and the possibility of scrolling the page (i.e. all the elements doesn't need to fit on the screen).
The right column will have 7 value boxes, and here comes the problem: using several value boxes in the column layout causes the boxes to be squished.
I appreciate in advance the help. Thanks for keeping quarto so useful.
Steps to reproduce
---
title: "Test dashboard"
format: dashboard
---
# Home {orientation="columns" scrolling="true"}
## Column 1
Content
## Column 2
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = 10
)
```
Expected behavior
As the scrolling is enabled I would expect the height of the page to adapt to the content, keeping the aspect ratio of the boxes. Note that using bslib::value_box with a fixed height keep the box height, but then causes the different boxes to overlap.
Actual behavior
The value boxes are compacted:
Using bslib::value_box with a min_height argument instead of the built-in solution causes the boxes to overlap:
```{r}
library(bslib)
library(bsicons)
value_box(
title = "Customer lifetime value",
value = "$5,000",
showcase = bsicons::bs_icon("bank2"),
theme = "black",
min_height = "200px"
)
```
Your environment
- IDE: RStudio Version 2024.04.0+735 (2024.04.0+735)
- MacOS Sonoma 14.4.1
Quarto check output
Quarto 1.5.52
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.5.52
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/silas/Library/TinyTeX/bin/universal-darwin
Version: 2023
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.12.3
Path: /opt/homebrew/opt/python@3.12/bin/python3.12
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with python3 -m pip install jupyter
[✓] Checking R installation...........OK
Version: 4.3.1
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
knitr: 1.45
rmarkdown: 2.26
[✓] Checking Knitr engine render......OK
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.
Assessment
This issue has not been assessed yet.