daattali / daattali/shinycssloaders
No dynamic resizing of ggplots with `bslib` and `withSpinner()`
- Dominant language
- CSS
- Stars
- 422
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Description
When using `withSpinner()` together with `bslib` layout functions, plots created with `ggplot2` will no longer automatically fill the height of the browser.
For instance, consider this Shiny app ([link](https://shinylive.io/r/editor/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw71OY4aIbM27AOZLU1IqQBMskQGIABAEF9nWjDVx9KtRpE3SAfRX6APAFp9AMwCuEAqVoSdgDSajgBfRARfStVdVJ2GFICFk5cfSg4TnYAD30AXn0Ad1J01gL9cyUBCIBqaJirOCIYB1QiPgS6hpiVELDg2lDwkQBfERFvWlcPVCglOAdPWmpqKHoBhrXWIm9HYmpvGAhsnv0UxgATdnsAeT3UPfYhMHsARhf07jhaJW5SCovTQABmBqByLxquDOF2udweTxe9k0n3031+-0BYBBYIhYBqDQE0IgMVhN3i91IjwSSPiAGZUei-gDCkDQeDIbIdCc4IwAG68mZeXz+QIQdh8anpXZUvbpThZUwkCJREn6GXUgAk7yFjAol15AAV4uSNE4lM8wMaNPoPvjZDENXttfFNLr9UaTfZzZbrQCUfaGk7SC6NHT3RADYw-abHCpffF9AzAxBxhARDw+KxDOh2FN5byBYwBGBRgBdIA) to Shinylive.io):
```r
library(shiny)
library(bslib)
library(ggplot2)
# A simple ggplot
plot_gg <- function(title) {
ggplot(mtcars, aes(x = wt, y = mpg)) +
geom_point() +
ggtitle(title)
}
ui <- page_fillable(
layout_columns(
card(plotOutput("plot1", height = "200px")),
card(plotOutput("plot2", height = "200px"))
),
card(plotOutput("plot3", height = "200px"))
)
server <- function(input, output, session) {
output$plot1 <- renderPlot(plot_gg("Plot 1"))
output$plot2 <- renderPlot(plot_gg("Plot 2"))
output$plot3 <- renderPlot(plot_gg("Plot 3"))
}
shinyApp(ui, server)
```
When the browser window is resized, the height of the plots is automatically adjusted to fill the entire height. This is the desired result.
If I now introduce `withSpinner()`, the code becomes as follows ([link](https://shinylive.io/r/editor/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw71OY4aIbM27AOZLU1IqQBMssQo48+rAp2lEoAEziNOskQGIABAEEHnWjDVwHKtRpG-SAH0VBwAeAFoHADMAVwgCUloSdkTSajgBBxARB29VdVJ2GFICFk5cByg4TnYADwcAXgcAd1IK1kaHDyUBTIBqHNzvOCIYQNQiPkL+wdyVVPSU2jSMkQBfEREY2jDI1CglOECo2mpqKHpFwfPWIhig4moYmAga2YdSxnN2ZuXuAGVUHwIFZ2AEAPL3VD3dhCMABACMcIq3DgtCU3FInThmgADLjULU4b0BLh3p9vr9SACgRAQYwwQVIaRoYU4QFNMiHKj0ZjsWA8QSiWASYNSYMKT8-oDgaCIVCYeyCgBmLk8jFYpo4-GE4m9ES2V5WABuVl20TiCSSEHYfFZFTuLPuFU41TcJEy2QguUdrIAJIjzYwKJZGAAFAqMjTBJSwsARjQOJEi2Q+hWkAMFTRBkNWBOFAIxuP5hyclODX33TMaZU5iCh-NRoIqYsFByq8sQDYQEQGfhOdDsbYuk1WWRgNYAXSAA) to Shinyapp.io), and the plots height are now predetermined and static.
```r
library(shiny)
library(bslib)
library(ggplot2)
library(shinycssloaders)
# A simple ggplot
plot_gg <- function(title) {
ggplot(mtcars, aes(x = wt, y = mpg)) +
geom_point() +
ggtitle(title)
}
ui <- page_fillable(
layout_columns(
card(withSpinner(plotOutput("plot1", height = "200px"))),
card(withSpinner(plotOutput("plot2", height = "200px")))
),
card(withSpinner(plotOutput("plot3", height = "200px")))
)
server <- function(input, output, session) {
output$plot1 <- renderPlot(plot_gg("Plot 1"))
output$plot2 <- renderPlot(plot_gg("Plot 2"))
output$plot3 <- renderPlot(plot_gg("Plot 3"))
}
shinyApp(ui, server)
```
Is there any built-in way to fix this behavior?
I wonder if this is related to https://github.com/daattali/shinycssloaders/issues/76, but using `fill = TRUE` did not help.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the two Shiny examples using bslib layout functions, ggplot2 plotOutput(), and shinycssloaders withSpinner(). Compare browser resizing with and without withSpinner(), then trace the generated output and CSS; done means spinner-wrapped plots still expand to the available height after window resizing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, r
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100