Cards stretch out of screen

[AlbertRapp]

Description

First off, I'm not really sure whether this is a bug or a user error on my part. In any case, I'm testing the UI editor and like the ease with which I can drag together a dashboard. But it seems like the cards always stretch a tiny bit too far out of screen. See the following screenshot:

The generated code for this app is

Shiny App

``` library(shiny) library(ggplot2) library(bslib) library(gridlayout) library(dplyr) penguins <- palmerpenguins::penguins |> filter(!is.na(sex)) ui <- page_navbar( title = "Penguins", selected = "Line Plots", collapsible = TRUE, theme = bslib::bs_theme(), nav_panel( title = "Line Plots", grid_container( layout = c( "num_chicks values_and_plot" ), gap_size = "10px", col_sizes = c( "240px", "1fr" ), row_sizes = c( "1fr" ), grid_card( area = "num_chicks", card_header("Settings"), card_body( sliderInput( inputId = "numChicks", label = "Penguin weights", min = 1, max = 15, value = 5, step = 1, width = "100%" ) ) ), grid_card( area = "values_and_plot", card_body( grid_container( layout = c( "n_adelie n_chinstrap n_gentoo ", "scatter_weight_bill_length scatter_weight_bill_length scatter_weight_bill_length" ), row_sizes = c( "0.4fr", "1.6fr" ), col_sizes = c( "0.95fr", "1.05fr", "1fr" ), gap_size = "10px", grid_card_plot( area = "scatter_weight_bill_length", height = '100px' ), grid_card( area = "n_adelie", card_body( value_box( title = "Adelie Penguins", value = textOutput(outputId = "count_adelie"), showcase = bsicons::bs_icon("people-fill") ) ) ), grid_card( area = "n_chinstrap", card_body( value_box( title = "Chinstrap Penguins", value = textOutput(outputId = "count_chinstrap"), showcase = bsicons::bs_icon("people-fill") ) ) ), grid_card( area = "n_gentoo", card_body( value_box( title = "Gentoo Penguins", value = textOutput(outputId = "count_gentoo"), showcase = bsicons::bs_icon("people-fill") ) ) ) ) ), card_footer() ) ) ), nav_panel( title = "Distributions", grid_container( row_sizes = c( "165px", "1fr" ), col_sizes = c( "1fr" ), gap_size = "10px", layout = c( "facetOption", "dists" ), grid_card_plot(area = "dists"), grid_card( area = "facetOption", card_header("Distribution Plot Options"), card_body( radioButtons( inputId = "distFacet", label = "Facet distribution by", choices = list("Diet Option" = "Diet", "Measure Time" = "Time") ) ) ) ) ) ) server <- function(input, output) { output$linePlots <- renderPlot({ obs_to_include <- as.integer(ChickWeight$Chick) <= input$numChicks chicks <- ChickWeight[obs_to_include, ] ggplot( chicks, aes( x = Time, y = weight, group = Chick ) ) + geom_line(alpha = 0.5) + ggtitle("Chick weights over time") }) output$dists <- renderPlot({ ggplot( ChickWeight, aes(x = weight) ) + facet_wrap(input$distFacet) + geom_density(fill = "#fa551b", color = "#ee6331") + ggtitle("Distribution of weights by diet") }) output$scatter_weight_bill_length <- renderPlot({ ggplot(penguins) + geom_point( aes( body_mass_g, bill_length_mm, fill = species ), shape = 21, size = 4, alpha = 0.5 ) + theme_minimal(base_size = 16) }) output$count_adelie <- renderText({ penguins |> filter(species == 'Adelie') |> nrow() }) output$count_chinstrap <- renderText({ penguins |> filter(species == 'Chinstrap') |> nrow() }) output$count_gentoo <- renderText({ penguins |> filter(species == 'Gentoo') |> nrow() }) } shinyApp(ui, server) ```

At first, I thought this was an issue on my system with not having the correct {bslib} version installed. But after running bslib::bs_theme_preview() I realized that in that case the {bslib} cards behave as they should, see:

So, now I suspect that this has something to do with the {gridlayout} package? But this is only a hunch. In any case, would be great to get some assistance on this. Is this a bug or do I need to tweak some option that I couldn't find?

Session info

^{Created on 2023-10-16 with [reprex v2.0.2](https://reprex.tidyverse.org)} ``` r sessioninfo::session_info() #> ─ Session info ─────────────────────────────────────────────────────────────── #> setting value #> version R version 4.3.1 (2023-06-16) #> os Ubuntu 22.04.3 LTS #> system x86_64, linux-gnu #> ui X11 #> language (EN) #> collate en_US.UTF-8 #> ctype en_US.UTF-8 #> tz Europe/Berlin #> date 2023-10-16 #> pandoc 3.1.1 @ /usr/lib/rstudio/resources/app/bin/quarto/bin/tools/ (via rmarkdown) #> #> ─ Packages ─────────────────────────────────────────────────────────────────── #> package * version date (UTC) lib source #> bsicons 0.1.1 2023-08-11 [1] CRAN (R 4.3.1) #> bslib * 0.5.1 2023-08-11 [1] CRAN (R 4.3.1) #> cachem 1.0.8 2023-05-01 [1] CRAN (R 4.3.0) #> callr 3.7.3 2022-11-02 [1] CRAN (R 4.3.0) #> chromote 0.1.1 2022-09-07 [1] CRAN (R 4.3.1) #> cli 3.6.1 2023-03-23 [1] CRAN (R 4.3.0) #> colorspace 2.1-0 2023-01-23 [1] CRAN (R 4.3.0) #> curl 5.1.0 2023-10-02 [1] CRAN (R 4.3.1) #> digest 0.6.33 2023-07-07 [1] CRAN (R 4.3.1) #> dplyr * 1.1.3 2023-09-03 [1] CRAN (R 4.3.1) #> ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.3.0) #> evaluate 0.22 2023-09-29 [1] CRAN (R 4.3.1) #> fansi 1.0.5 2023-10-08 [1] CRAN (R 4.3.1) #> farver 2.1.1 2022-07-06 [1] CRAN (R 4.3.0) #> fastmap 1.1.1 2023-02-24 [1] CRAN (R 4.3.0) #> fs 1.6.3 2023-07-20 [1] CRAN (R 4.3.1) #> generics 0.1.3 2022-07-05 [1] CRAN (R 4.3.0) #> ggplot2 * 3.4.4 2023-10-12 [1] CRAN (R 4.3.1) #> glue 1.6.2 2022-02-24 [1] CRAN (R 4.3.0) #> gridlayout * 0.2.1 2023-10-16 [1] Github (rstudio/gridlayout@f00d0e6) #> gtable 0.3.4 2023-08-21 [1] CRAN (R 4.3.1) #> htmltools 0.5.6.9001 2023-10-16 [1] Github (rstudio/htmltools@9436031) #> httpuv 1.6.11 2023-05-11 [1] CRAN (R 4.3.1) #> jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.3.0) #> jsonlite 1.8.7 2023-06-29 [1] CRAN (R 4.3.1) #> knitr 1.44 2023-09-11 [1] CRAN (R 4.3.1) #> labeling 0.4.3 2023-08-29 [1] CRAN (R 4.3.1) #> later 1.3.1 2023-05-02 [1] CRAN (R 4.3.1) #> lifecycle 1.0.3 2022-10-07 [1] CRAN (R 4.3.0) #> magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.3.0) #> memoise 2.0.1 2021-11-26 [1] CRAN (R 4.3.0) #> mime 0.12 2021-09-28 [1] CRAN (R 4.3.0) #> munsell 0.5.0 2018-06-12 [1] CRAN (R 4.3.0) #> palmerpenguins 0.1.1 2022-08-15 [1] CRAN (R 4.3.1) #> pillar 1.9.0 2023-03-22 [1] CRAN (R 4.3.0) #> pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.3.0) #> processx 3.8.2 2023-06-30 [1] CRAN (R 4.3.1) #> promises 1.2.1 2023-08-10 [1] CRAN (R 4.3.1) #> ps 1.7.5 2023-04-18 [1] CRAN (R 4.3.0) #> R6 2.5.1 2021-08-19 [1] CRAN (R 4.3.0) #> ragg 1.2.5 2023-01-12 [1] CRAN (R 4.3.0) #> Rcpp 1.0.11 2023-07-06 [1] CRAN (R 4.3.1) #> reprex 2.0.2 2022-08-17 [1] CRAN (R 4.3.0) #> rlang 1.1.1 2023-04-28 [1] CRAN (R 4.3.0) #> rmarkdown 2.25 2023-09-18 [1] CRAN (R 4.3.1) #> rstudioapi 0.15.0 2023-07-07 [1] CRAN (R 4.3.1) #> sass 0.4.7 2023-07-15 [1] CRAN (R 4.3.1) #> scales 1.2.1 2022-08-20 [1] CRAN (R 4.3.0) #> sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.3.1) #> shiny * 1.7.5.1 2023-10-14 [1] CRAN (R 4.3.1) #> systemfonts 1.0.4 2022-02-11 [1] CRAN (R 4.3.0) #> textshaping 0.3.6 2021-10-13 [1] CRAN (R 4.3.0) #> tibble 3.2.1 2023-03-20 [1] CRAN (R 4.3.0) #> tidyselect 1.2.0 2022-10-10 [1] CRAN (R 4.3.0) #> utf8 1.2.3 2023-01-31 [1] CRAN (R 4.3.0) #> vctrs 0.6.4 2023-10-12 [1] CRAN (R 4.3.1) #> webshot2 0.1.0 2022-05-18 [1] CRAN (R 4.3.1) #> websocket 1.4.1 2021-08-18 [1] CRAN (R 4.3.1) #> withr 2.5.1 2023-09-26 [1] CRAN (R 4.3.1) #> xfun 0.40 2023-08-09 [1] CRAN (R 4.3.1) #> xml2 1.3.5 2023-07-06 [1] CRAN (R 4.3.1) #> xtable 1.8-4 2019-04-21 [1] CRAN (R 4.3.1) #> yaml 2.3.7 2023-01-23 [1] CRAN (R 4.3.0) #> #> [1] /home/albert/R/x86_64-pc-linux-gnu-library/4.3 #> [2] /usr/local/lib/R/site-library #> [3] /usr/lib/R/site-library #> [4] /usr/lib/R/library #> #> ────────────────────────────────────────────────────────────────────────────── ```

[nstrayer]

Good catch! This is/was a bug in gridlayout. As bslib evolved forward I didn't update gridlayout work properly with the new styles. If you update gridlayout from main (as of https://github.com/rstudio/gridlayout/commit/dc7d8912ae27e5393561dcc2b9bd637f3653ca09) now it should behave much better.

This is what the demo app you provided looks like for me.

[AlbertRapp]

Great fix, thank you. This worked for me.

One thing you may want to be aware of that the current output only works with the current CRAN version of bslib. If I install the current dev version of bslib, the grid behavior isn't great. And oddly enough the default theme seems to change (Again not sure if I should raise this issue here or in bslib or gridlayout :smile:)

[gadenbuie]

Hi @AlbertRapp! The current dev version of bslib -- soon to be released -- indeed changes the default Bootstrap theme preset to use our new Shiny preset. You can still use plain Bootstrap by setting theme = bs_theme(version = 5, preset = "bootstrap") or a Bootswatch theme by setting bs_theme(5, "flatly") (for example).

I think that the behavior you're seeing in the above example is quite subtle. We made some adjustments to the value_box() styles that switch the value box layout from "horizontal" to "vertical" when the value box width is small enough. In typical bslib apps, one would use layout_columns() or layout_column_wrap() to layout several value boxes, both of which will by default give all items the same width.

In your example, however, the three value boxes do not have the exact same width – the first one is slightly smaller than the others, causing its layout to shift but not the other value boxes. It also looks like there's a height constraint on that row that's squishing the value boxes more than they would naturally. I'd start by making sure that each of the three columns for the value boxes have the same width.

[AlbertRapp]

Ah yes. Using equal widths fixed the issue. I must have dragged something in the UI editor so that I didn't get equal columns. My bad :smile: Thanks for the hint.