quarto-dev / quarto-dev/quarto-cli

Value boxes in column-based dashboard get squished

Open
#10,318 6 comments 1 reaction 1 assignee View on GitHub

@cscheid is already working on this.

Since Jul 18, 2024.

bug dashboards layout
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:

image

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"
)
```
image
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

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.