Remove margin/padding when layout_sidebar() is root element of a page_navbar nav_panel

[PaulC91]

Hi there.

Firstly many thanks for all the great progress on bslib. I really like the option of being able to have various page layouts within a page_navbar including some with sidebars and some without.

However, as you can currently see on your Multi-page varied layout example, when a layout_sidebar is provided as the root UI element of a nav_panel inside a page_navbar there is a noticeable amount of padding around it. I don't think this is desirable as sidebar layouts should ideally be flush to the edges of the page, like they are when a global sidebar is set in page_navbar.

Is there an easy workaround to achieve this or is possible to make this the default behaviour in the package?

Thanks!

[gadenbuie]

bslib will automatically expand the local sidebar layout to full-width in a navbar panel when

1. The panel is fillable, i.e. fillable = TRUE for that panel, and
2. The layout_sidebar() is the only child.

Using an example from the linked layout article, the Diamonds panel will have a local, full-width/height sidebar layout:

page_navbar(
  title = "Sidebar demo",
  fillable = TRUE,
  nav_panel("Earthquakes", sidebar_quakes),
  nav_panel(
    "Diamonds",
    layout_sidebar(
      sidebar = sidebar(filters[[1]]),
      plots[[1]]
    )
  )
)

Notice that I changed fillable from fillable = "Earthquakes" to fillable = TRUE so that all panels in this navbar page are fillable. I also reduced the diamonds panel to a single layout_sidebar() – the example in the article has three of these layouts.

Are you wanting to have three sidebar layouts on the same page but have all three be the width of the browser window? If so, that's not well supported in bslib and you'd likely have to write some custom CSS to achieve that layout.

[PaulC91]

Hey thanks for the response. I'm not getting the desired result following the 2 conditions you mentioned:

library(shiny)
library(bslib)

ui <- page_navbar(
  title = "Sidebar demo",
  fillable = TRUE,
  nav_panel(
    "Earthquakes",
    layout_sidebar(
      sidebar = sidebar(title = "Sidebar"),
      "Test"
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Session info

``` r sessioninfo::session_info() #> ─ Session info ─────────────────────────────────────────────────────────────── #> setting value #> version R version 4.2.1 (2022-06-23) #> os macOS Big Sur ... 10.16 #> system x86_64, darwin17.0 #> ui X11 #> language (EN) #> collate en_US.UTF-8 #> ctype en_US.UTF-8 #> tz Europe/Paris #> date 2023-06-14 #> 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.0 2023-06-09 [1] CRAN (R 4.2.0) #> cachem 1.0.6 2021-08-19 [1] CRAN (R 4.2.0) #> cli 3.4.1 2022-09-23 [1] CRAN (R 4.2.0) #> digest 0.6.29 2021-12-01 [1] CRAN (R 4.2.0) #> ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.2.0) #> evaluate 0.16 2022-08-09 [1] CRAN (R 4.2.0) #> fansi 1.0.3 2022-03-24 [1] CRAN (R 4.2.0) #> fastmap 1.1.1 2023-02-24 [1] CRAN (R 4.2.0) #> fs 1.5.2 2021-12-08 [1] CRAN (R 4.2.0) #> glue 1.6.2 2022-02-24 [1] CRAN (R 4.2.0) #> highr 0.9 2021-04-16 [1] CRAN (R 4.2.0) #> htmltools 0.5.5.9000 2023-05-17 [1] Github (rstudio/htmltools@73fd307) #> httpuv 1.6.5 2022-01-05 [1] CRAN (R 4.2.0) #> jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.2.0) #> jsonlite 1.8.0 2022-02-22 [1] CRAN (R 4.2.0) #> knitr 1.39 2022-04-26 [1] CRAN (R 4.2.0) #> later 1.3.0 2021-08-18 [1] CRAN (R 4.2.0) #> lifecycle 1.0.3 2022-10-07 [1] CRAN (R 4.2.0) #> magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.2.0) #> mime 0.12 2021-09-28 [1] CRAN (R 4.2.0) #> pillar 1.8.1 2022-08-19 [1] CRAN (R 4.2.0) #> pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.2.0) #> promises 1.2.0.1 2021-02-11 [1] CRAN (R 4.2.0) #> purrr 1.0.1 2023-01-10 [1] CRAN (R 4.2.0) #> R.cache 0.16.0 2022-07-21 [1] CRAN (R 4.2.0) #> R.methodsS3 1.8.2 2022-06-13 [1] CRAN (R 4.2.0) #> R.oo 1.25.0 2022-06-12 [1] CRAN (R 4.2.0) #> R.utils 2.12.0 2022-06-28 [1] CRAN (R 4.2.0) #> R6 2.5.1 2021-08-19 [1] CRAN (R 4.2.0) #> Rcpp 1.0.10 2023-01-22 [1] CRAN (R 4.2.0) #> reprex 2.0.2 2022-08-17 [1] CRAN (R 4.2.0) #> rlang 1.0.6 2022-09-24 [1] CRAN (R 4.2.0) #> rmarkdown 2.15 2022-08-16 [1] CRAN (R 4.2.0) #> rstudioapi 0.13 2020-11-12 [1] CRAN (R 4.2.0) #> sass 0.4.2 2022-07-16 [1] CRAN (R 4.2.0) #> sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.2.0) #> shiny * 1.7.4 2022-12-15 [1] CRAN (R 4.2.0) #> stringi 1.7.8 2022-07-11 [1] CRAN (R 4.2.0) #> stringr 1.4.1 2022-08-20 [1] CRAN (R 4.2.0) #> styler 1.7.0 2022-03-13 [1] CRAN (R 4.2.0) #> tibble 3.1.8 2022-07-22 [1] CRAN (R 4.2.0) #> utf8 1.2.2 2021-07-24 [1] CRAN (R 4.2.0) #> vctrs 0.5.2 2023-01-23 [1] CRAN (R 4.2.0) #> withr 2.5.0 2022-03-03 [1] CRAN (R 4.2.0) #> xfun 0.32 2022-08-10 [1] CRAN (R 4.2.0) #> xtable 1.8-4 2019-04-21 [1] CRAN (R 4.2.0) #> yaml 2.3.5 2022-02-21 [1] CRAN (R 4.2.0) #> #> [1] /Library/Frameworks/R.framework/Versions/4.2/Resources/library #> #> ────────────────────────────────────────────────────────────────────────────── ```

[gadenbuie]

Are you using Firefox by chance? (If not, which browser are you testing in?) We're using the :has() selector to make this work, which isn't quite supported in Firefox yet. I apologize for not mentioning that earlier.

[PaulC91]

Ahh yes I am! OK no problem I can wait for the firefox support :) Thanks for your time looking into it.