Bootswatch 5 themes introduce empty space above elements

[jdsher]

Hi,

I'm attempting update an older flexdashboard of mine with a Bootswatch 5 theme, and have noticed a new behavior that seems to only crop up when using 5. An empty space is introduced above rows and columns, no matter the layout style (I've only tried a few, though). Any idea how this can be fixed? Thank you for your work on this package!

As a reprex, you can change the YAML for the "Sales Report with Highcharter" dashboard on the "Examples" page to:

---
title: "Sales Report with Highcharter"
author: "Joshua Kunst"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    social: menu
    source_code: embed
    theme: 
      version: 5
---

[gadenbuie]

Thanks @jdsher! I have a fix in #443 which you could try now if you want by using

remotes::install_github("rstudio/flexdashboard#443")

(otherwise the fix should be merged to main in the next day or so.)

[ashirwad]

@gadenbuie, I still see the empty spaces! Do I need to add anything else to the YAML for the changes to take effect?

[gadenbuie]

@ashirwad Have you installed the latest version of flexdashboard from GitHub (the fix isn't yet on CRAN)? If so, can you share the output from sessioninfo::session_info()?

[jdsher]

I also still see the gaps @gadenbuie. Here's my session_info():

version  R version 4.3.1 (2023-06-16)
 os       macOS Sonoma 14.0
 system   aarch64, darwin20
 ui       RStudio
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       America/Los_Angeles
 date     2023-10-13
 rstudio  2023.09.0+463 Desert Sunflower (desktop)
 pandoc   3.1.1 @ /Applications/RStudio.app/Contents/Resources/app/quarto/bin/tools/ (via rmarkdown)

─ Packages ──────────────────────────────────────────────────────────────────────────────────
 package       * version    date (UTC) lib source
 bslib           0.5.1      2023-08-11 [1] CRAN (R 4.3.0)
 cachem          1.0.8      2023-05-01 [1] CRAN (R 4.3.0)
 cli             3.6.1      2023-03-23 [1] CRAN (R 4.3.0)
 codetools       0.2-19     2023-02-01 [1] CRAN (R 4.3.1)
 colorspace      2.1-0      2023-01-23 [1] CRAN (R 4.3.0)
 dichromat       2.0-0.1    2022-05-02 [1] CRAN (R 4.3.0)
 digest          0.6.33     2023-07-07 [1] CRAN (R 4.3.0)
 evaluate        0.22       2023-09-29 [1] CRAN (R 4.3.1)
 fastmap         1.1.1      2023-02-24 [1] CRAN (R 4.3.0)
 flexdashboard   0.6.2.9000 2023-10-04 [1] Github (rstudio/flexdashboard@ead27af)
 htmltools       0.5.6.1    2023-10-06 [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.0)
 knitr           1.44       2023-09-11 [1] CRAN (R 4.3.0)
 lattice         0.21-9     2023-10-01 [1] CRAN (R 4.3.1)
 lifecycle       1.0.3      2022-10-07 [1] CRAN (R 4.3.0)
 mapproj         1.2.11     2023-01-12 [1] CRAN (R 4.3.0)
 maps            3.4.1      2022-10-30 [1] CRAN (R 4.3.0)
 pals            1.8        2023-08-23 [1] CRAN (R 4.3.0)
 R6              2.5.1      2021-08-19 [1] CRAN (R 4.3.0)
 raster        * 3.6-23     2023-07-04 [1] CRAN (R 4.3.0)
 RColorBrewer    1.1-3      2022-04-03 [1] CRAN (R 4.3.0)
 Rcpp            1.0.11     2023-07-06 [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)
 rsconnect       1.1.1      2023-10-04 [1] CRAN (R 4.3.1)
 rstudioapi      0.15.0     2023-07-07 [1] CRAN (R 4.3.0)
 sass            0.4.7      2023-07-15 [1] CRAN (R 4.3.0)
 sessioninfo     1.2.2      2021-12-06 [1] CRAN (R 4.3.0)
 sp            * 2.1-0      2023-10-02 [1] CRAN (R 4.3.1)
 terra           1.7-46     2023-09-06 [1] CRAN (R 4.3.0)
 xfun            0.40       2023-08-09 [1] CRAN (R 4.3.0)
 yaml            2.3.7      2023-01-23 [1] CRAN (R 4.3.0)

And the YAML used:

---
title: "Sales Report with Highcharter"
author: "Joshua Kunst"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    social: menu
    source_code: embed
    theme: 
      version: 5
      bootswatch: materia
      primary: "#1D534D"
---

[gadenbuie]

Here's what I see using the YAML in the last comment. Where are you viewing the dashboard? It's possible that whichever browser you're using (even the built in browser in RStudio) is caching older versions of the bootstrap/flexdashboard dependencies. Try right clicking on the dashboard, click on "Inspect Element", go to the "Network" tab and check "Disable cache". Then reload the page or maybe even rebuild the Rmd and reload.

[ashirwad]

Huh, surprising! I still see the gaps even after following your steps! I am running multiple dashboards, some with version: 4 and some with version: 5. Can this be the cause of the gaps due to the caching behavior that you alluded to before, @gadenbuie?

[gadenbuie]

@ashirwad Can you share the results of sessioninfo::session_info()? The fix I added to flexdashboard should fix the gaps when using Bootstrap version: 5. I didn't notice any gaps when testing version: 4.

[gadenbuie]

Also, the caching wouldn't cause the gaps; but it might cause the browser to load a cached bootstrap.min.css file that doesn't have the CSS I added to flexdashboard.

[ashirwad]

@ashirwad Can you share the results of sessioninfo::session_info()? The fix I added to flexdashboard should fix the gaps when using Bootstrap version: 5. I didn't notice any gaps when testing version: 4.

@gadenbuie, here you go:

sessioninfo::session_info()
#> ─ Session info ───────────────────────────────────────────────────────────────
#>  setting  value
#>  version  R version 4.2.3 (2023-03-15)
#>  os       Ubuntu 20.04.6 LTS
#>  system   x86_64, linux-gnu
#>  ui       X11
#>  language (EN)
#>  collate  C.UTF-8
#>  ctype    C.UTF-8
#>  tz       Etc/UTC
#>  date     2023-10-23
#>  pandoc   3.1.1 @ /usr/lib/rstudio-server/bin/quarto/bin/tools/ (via rmarkdown)
#> 
#> ─ Packages ───────────────────────────────────────────────────────────────────
#>  ! package     * version date (UTC) lib source
#>  P cli           3.6.1   2023-03-23 [?] RSPM
#>  P digest        0.6.33  2023-07-07 [?] RSPM (R 4.2.0)
#>  P evaluate      0.21    2023-05-05 [?] RSPM (R 4.2.0)
#>  P fastmap       1.1.1   2023-02-24 [?] RSPM (R 4.2.0)
#>  P fs            1.6.3   2023-07-20 [?] RSPM (R 4.2.0)
#>  P glue          1.6.2   2022-02-24 [?] RSPM
#>  P htmltools     0.5.6   2023-08-10 [?] RSPM (R 4.2.0)
#>  P knitr         1.44    2023-09-11 [?] RSPM (R 4.2.0)
#>  P lifecycle     1.0.3   2022-10-07 [?] RSPM
#>  P magrittr      2.0.3   2022-03-30 [?] RSPM
#>  P purrr         1.0.2   2023-08-10 [?] RSPM
#>  P R.cache       0.16.0  2022-07-21 [?] RSPM (R 4.2.0)
#>  P R.methodsS3   1.8.2   2022-06-13 [?] RSPM (R 4.2.0)
#>  P R.oo          1.25.0  2022-06-12 [?] RSPM (R 4.2.0)
#>  P R.utils       2.12.2  2022-11-11 [?] RSPM (R 4.2.0)
#>  P reprex        2.0.2   2022-08-17 [?] RSPM (R 4.2.0)
#>  P rlang         1.1.1   2023-04-28 [?] RSPM
#>  P rmarkdown     2.25    2023-09-18 [?] RSPM (R 4.2.0)
#>  P rstudioapi    0.15.0  2023-07-07 [?] RSPM (R 4.2.0)
#>  P sessioninfo   1.2.2   2021-12-06 [?] RSPM (R 4.2.0)
#>  P styler        1.10.2  2023-08-29 [?] RSPM (R 4.2.0)
#>  P vctrs         0.6.3   2023-06-14 [?] RSPM
#>  P withr         2.5.0   2022-03-03 [?] RSPM (R 4.2.0)
#>  P xfun          0.40    2023-08-09 [?] RSPM (R 4.2.0)
#>  P yaml          2.3.7   2023-01-23 [?] RSPM (R 4.2.0)
#> 
#>  [1] /srv/shiny-server/territory-dashboard/renv/library/R-4.2/x86_64-pc-linux-gnu
#>  [2] /home/ashirwad/.cache/R/renv/sandbox/R-4.2/x86_64-pc-linux-gnu/e11edd0e
#>  [3] /opt/R/4.2.3/lib/R/library
#> 
#>  P ── Loaded and on-disk path mismatch.
#> 
#> ──────────────────────────────────────────────────────────────────────────────

^{Created on 2023-10-23 with reprex v2.0.2}

[gadenbuie]

Thanks @ashirwad, but you should probably not use reprex to run sessioninfo::session_info() since it tries to isolate the computation from your current session. Can you try again from within the relevant R session where you're rending the flexdashboard document?

[ashirwad]

Oh, thanks for pointing that out, @gadenbuie! Here's the corrected session info:

> sessioninfo::session_info()
─ Session info ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.2.3 (2023-03-15)
 os       Ubuntu 20.04.6 LTS
 system   x86_64, linux-gnu
 ui       RStudio
 language (EN)
 collate  C.UTF-8
 ctype    C.UTF-8
 tz       Etc/UTC
 date     2023-10-23
 rstudio  2023.06.2+561 Mountain Hydrangea (server)
 pandoc   3.1.1 @ /usr/lib/rstudio-server/bin/quarto/bin/tools/ (via rmarkdown)

─ Packages ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 ! package       * version    date (UTC) lib source
 P arules        * 1.7-6      2023-03-23 [?] RSPM (R 4.2.0)
 P assertthat      0.2.1      2019-03-21 [?] RSPM (R 4.2.0)
 P backports       1.4.1      2021-12-13 [?] RSPM (R 4.2.0)
 P broom           1.0.5      2023-06-09 [?] RSPM (R 4.2.0)
 P bslib           0.5.1      2023-08-11 [?] RSPM (R 4.2.0)
 P cachem          1.0.8      2023-05-01 [?] RSPM (R 4.2.0)
 P cli             3.6.1      2023-03-23 [?] RSPM
 P colorspace      2.1-0      2023-01-23 [?] RSPM (R 4.2.0)
 P curl            5.0.2      2023-08-14 [?] RSPM (R 4.2.0)
 P data.table      1.14.8     2023-02-17 [?] RSPM (R 4.2.0)
 P digest          0.6.33     2023-07-07 [?] RSPM (R 4.2.0)
 P dplyr         * 1.1.3      2023-09-03 [?] RSPM (R 4.2.0)
 P ellipsis        0.3.2      2021-04-29 [?] RSPM (R 4.2.0)
 P evaluate        0.21       2023-05-05 [?] RSPM (R 4.2.0)
 P fansi           1.0.4      2023-01-22 [?] RSPM (R 4.2.0)
 P fastmap         1.1.1      2023-02-24 [?] RSPM (R 4.2.0)
 P flexdashboard * 0.6.2.9000 2023-10-13 [?] Github (rstudio/flexdashboard@5cfc9c8)
 P forecast      * 8.21.1     2023-08-31 [?] RSPM (R 4.2.0)
 P fracdiff        1.5-2      2022-10-31 [?] RSPM (R 4.2.0)
 P generics        0.1.3      2022-07-05 [?] RSPM (R 4.2.0)
 P ggplot2         3.4.3      2023-08-14 [?] RSPM (R 4.2.0)
 P glue            1.6.2      2022-02-24 [?] RSPM
 P gridBase        0.4-7      2014-02-24 [?] RSPM (R 4.2.0)
 P gtable          0.3.4      2023-08-21 [?] RSPM (R 4.2.0)
 P highcharter   * 0.9.4      2022-01-03 [?] RSPM (R 4.2.3)
 P htmltools       0.5.6      2023-08-10 [?] RSPM (R 4.2.0)
 P htmlwidgets     1.6.2      2023-03-17 [?] RSPM (R 4.2.0)
 P httpuv          1.6.11     2023-05-11 [?] RSPM (R 4.2.0)
 P igraph          1.5.1      2023-08-10 [?] RSPM (R 4.2.0)
 P jquerylib       0.1.4      2021-04-26 [?] RSPM (R 4.2.0)
 P jsonlite        1.8.7      2023-06-29 [?] RSPM (R 4.2.0)
 P knitr           1.44       2023-09-11 [?] RSPM (R 4.2.0)
 P later           1.3.1      2023-05-02 [?] RSPM (R 4.2.0)
 P lattice         0.20-45    2021-09-22 [?] CRAN (R 4.2.3)
 P lifecycle       1.0.3      2022-10-07 [?] RSPM
 P lmtest          0.9-40     2022-03-21 [?] RSPM (R 4.2.0)
 P lubridate       1.9.3      2023-09-27 [?] RSPM (R 4.2.0)
 P magrittr        2.0.3      2022-03-30 [?] RSPM
 P Matrix        * 1.5-3      2022-11-11 [?] CRAN (R 4.2.3)
 P mime            0.12       2021-09-28 [?] RSPM (R 4.2.0)
 P munsell         0.5.0      2018-06-12 [?] RSPM (R 4.2.0)
 P nlme            3.1-162    2023-01-31 [?] CRAN (R 4.2.3)
 P nnet            7.3-18     2022-09-28 [?] CRAN (R 4.2.3)
 P pillar          1.9.0      2023-03-22 [?] RSPM (R 4.2.0)
 P pkgconfig       2.0.3      2019-09-22 [?] RSPM (R 4.2.0)
 P promises        1.2.1      2023-08-10 [?] RSPM (R 4.2.0)
 P purrr           1.0.2      2023-08-10 [?] RSPM
 P quadprog        1.5-8      2019-11-20 [?] RSPM (R 4.2.0)
 P quantmod        0.4.25     2023-08-22 [?] RSPM (R 4.2.0)
 P R6              2.5.1      2021-08-19 [?] RSPM (R 4.2.0)
 P RColorBrewer    1.1-3      2022-04-03 [?] RSPM (R 4.2.0)
 P Rcpp            1.0.11     2023-07-06 [?] RSPM (R 4.2.0)
 P renv            1.0.3      2023-09-19 [?] RSPM (R 4.2.0)
 P rlang           1.1.1      2023-04-28 [?] RSPM
 P rlist           0.4.6.2    2021-09-03 [?] RSPM (R 4.2.3)
 P rmarkdown       2.25       2023-09-18 [?] RSPM (R 4.2.0)
 P rstudioapi      0.15.0     2023-07-07 [?] RSPM (R 4.2.0)
 P sass            0.4.7      2023-07-15 [?] RSPM (R 4.2.0)
 P scales          1.2.1      2022-08-20 [?] RSPM (R 4.2.0)
 P sessioninfo     1.2.2      2021-12-06 [?] RSPM (R 4.2.0)
 P shiny           1.7.5      2023-08-12 [?] RSPM (R 4.2.0)
 P stringi         1.7.12     2023-01-11 [?] RSPM (R 4.2.0)
 P stringr         1.5.0      2022-12-02 [?] RSPM (R 4.2.0)
 P tibble          3.2.1      2023-03-20 [?] RSPM (R 4.2.0)
 P tidyr           1.3.0      2023-01-24 [?] RSPM (R 4.2.0)
 P tidyselect      1.2.0      2022-10-10 [?] RSPM (R 4.2.0)
 P timechange      0.2.0      2023-01-11 [?] RSPM (R 4.2.0)
 P timeDate        4022.108   2023-01-07 [?] RSPM (R 4.2.0)
 P treemap       * 2.4-4      2023-05-25 [?] RSPM (R 4.2.0)
 P tseries         0.10-54    2023-05-02 [?] RSPM (R 4.2.0)
 P TTR             0.24.3     2021-12-12 [?] RSPM (R 4.2.0)
 P urca            1.3-3      2022-08-29 [?] RSPM (R 4.2.0)
 P utf8            1.2.3      2023-01-31 [?] RSPM (R 4.2.0)
 P vctrs           0.6.3      2023-06-14 [?] RSPM
 P viridisLite   * 0.4.2      2023-05-02 [?] RSPM (R 4.2.0)
 P xfun            0.40       2023-08-09 [?] RSPM (R 4.2.0)
 P xtable          1.8-4      2019-04-21 [?] RSPM (R 4.2.0)
 P xts             0.13.1     2023-04-16 [?] RSPM (R 4.2.0)
 P yaml            2.3.7      2023-01-23 [?] RSPM (R 4.2.0)
 P zoo             1.8-12     2023-04-13 [?] RSPM (R 4.2.0)

 [1] /srv/shiny-server/territory-dashboard/renv/library/R-4.2/x86_64-pc-linux-gnu
 [2] /home/ashirwad/.cache/R/renv/sandbox/R-4.2/x86_64-pc-linux-gnu/e11edd0e

 P ── Loaded and on-disk path mismatch.

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

[ashirwad]

Hey, @gadenbuie! Do you have an ETA on this?

[gadenbuie]

I'm going to see if others on my team can reprex the issue. Here's a much smaller reprex:

---
title: "Issue 440"
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    theme:
      version: 5
---

Column {data-width=600}
-----------------------------------------------------------------------

### Sales Forecast

Sales forecast

### Sales by State

Sales by state

Column {.tabset data-width=400}
-----------------------------------------------------------------------

### Sales by Category

Sales by Category

### Best Sellers

Best Sellers

[gadenbuie]

@ashirwad We're still not able to reproduce the issue. The best advice I can offer is to make sure that you're using the latest flexdashboard and bslib packages, installed from GitHub:

remotes::install_github(c("rstudio/flexdashboard", "rstudio/bslib"))

Here's what we see with the above example.

[ashirwad]

@gadenbuie, when I updated bslib like you had instructed, everything works perfectly now! Thanks a lot!