Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bslib value box fullscreen mode expands to full page (vertically) when format: html: page-layout is set to full #7361

Closed
EconomiCurtis opened this issue Oct 25, 2023 · 0 comments
Assignees
Labels
bug Something isn't working triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone.
Milestone

Comments

@EconomiCurtis
Copy link

Bug description

Do let me know if I should be sharing this with the Shiny bslib team instead of sharing this here.

The issue is apparent with this reprex,

With format: html: page-layout: article, fullscreen mode for bslib value boxes appear as expected. When set to full, the value box's full screen mode expands vertically to fill the entire page.

page-layout: article
image

page-layout: full
image

Steps to reproduce

reprex

And the example below, change page-layout: from full to article.

---
title: "fullscreen-vb"
format:
  html:
    page-layout: full
---

```{r}
library(shiny)
library(bslib)
library(plotly)

sparkline <- plot_ly(economics) %>%
  add_lines(
    x = ~date, y = ~psavert,
    color = I("white"), span = I(1),
    fill = 'tozeroy', alpha = 0.2
  ) %>%
  layout(
    xaxis = list(visible = F, showgrid = F, title = ""),
    yaxis = list(visible = F, showgrid = F, title = ""),
    hovermode = "x",
    margin = list(t = 0, r = 0, l = 0, b = 0),
    font = list(color = "white"),
    paper_bgcolor = "transparent",
    plot_bgcolor = "transparent"
  ) %>%
  config(displayModeBar = F) %>%
  htmlwidgets::onRender(
    "function(el) {
      var ro = new ResizeObserver(function() {
         var visible = el.offsetHeight > 200;
         Plotly.relayout(el, {'xaxis.visible': visible});
      });
      ro.observe(el);
    }"
  )


value_box(
  title = "Personal Savings Rate",
  value = "7.6%",
  p("Started at 12.6%"),
  p("Averaged 8.6% over that period"),
  p("Peaked 17.3% in May 1975"),
  showcase = sparkline,
  full_screen = TRUE,
  theme = "success"
)
```

Expected behavior

value box fullscreen mode in a quarto box to fill the browser window

Actual behavior

the value box filled the full page, expending vertically beyond the space you'd want it to go.

Your environment

No response

Quarto check output

[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.1: OK
Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.3.450
Path: /Applications/quarto/bin

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

[✓] Checking Python 3 installation....OK
Version: 3.9.6
Path: /Library/Developer/CommandLineTools/usr/bin/python3
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.44
rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

@EconomiCurtis EconomiCurtis added the bug Something isn't working label Oct 25, 2023
@cscheid cscheid added the triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone. label Oct 25, 2023
@dragonstyle dragonstyle added this to the v1.4 milestone Nov 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone.
Projects
None yet
Development

No branches or pull requests

3 participants