rstudio / rstudio/bslib

Footer does not stick to bottom of the page in fillable layout using page_navbar()

Open
#1,130 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
569
Forks
72
Avg merge
1d 2h
Merged PRs (30d)
5

Description

Describe the problem

When using the footer option in page_navbar() with a fillable layout, the footer does not adjust to the changing page size. Instead, it just stays under the UI elements in the location where the bottom of the initial page was.

If you use the fillable = FALSE argument, then the footer is always present right below your last UI element, instead of at the bottom of the page. However, it does stay below all elements, and does adjust as new elements are added.

I coded this up on the shinylive website so that people could play with the fillable = TRUE or fillable = FALSE options and could see the behavior of the footer text.

I just repeated the example text to create a very large UI as the example.
Here is the code that is also shown on the shinylive site.


library(shiny)
library(bslib)

ui <- page_navbar( #<<
  nav_panel("A", tagList("Page A content",
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content", 
                         br(), "Page A content")), #<<
  nav_panel("B", "Page B content"), #<<
  nav_panel("C", "Page C content"), #<<
  title = "App with navbar", #<<
  id = "page",
  footer = "my footer",
  fillable = TRUE#<<
) #<<

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

https://shinylive.io/r/editor/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw71OY4RBEBXWgAIAPAFolqKAHM4AfWgA3ei3ZKAxCpUilSo3q0Q41dkLABBN7iWkdAGVpOUlcwAAUdOCV3JWIyClIvG1tklNS0lKZ2AW83cN0omJJyMi8lJPSKiszssrCIgtjihLwyiEr2tOqcuvzoxvjS8o6Ortq8yL6igZah4crR3PrJuJKZtrmRxizu8Yap1Zz1jfmtmsXewpXmw+P2hZ6Jy6bBo9vO052lp+mbt-T73bLZ5rP7-D5jL79A6tUHvbYQi5Q64w2EZcHnR5Il6otHwjF7K7YnG2AGQ-bI2aw0mI8lE4nUzG0kHEpQMgnA3709EPdk-FFcvE8oF8ymgtnC6Giv7i76S16omVY5kCs5C2UU+VU7mA9V0nGKpmc-XasmE5XGwU6pVGhUmmlmm1ay2mjn8i2qq2Gt2253211St4Gh3ep0el0izViu2M4MB25B-2R6XR3lylmslMSjXphMRnOZ3Xmn1hv15lm5tPlgvWkNR30xxP5+up7NV5tZvXFz6l1YCGqWazreyOZwhABCgx5Y8L-asSWHUCcLjcAGFJ7sVzPvAOkqRaKRqJEALy1dzoJQAd333DsUGMLFKO-WtAAJkoT24tLpEusAGZEIhyEYd9ahgVglH-QC4EYH9bF-WhqGoKB6EPECABUsAAVQAUSfAQLDnOQIE4aDDGg1QNF-eQIAIPcSHYPhUHkUhvCIZimNIfCQBEEQAF8eOI3h+DPVB2EUEDFG8EjGDI4CT2k2TZDAXiAF0gA

I added the sessionInfo() from the shinylive site, for completeness.

Session Info

R version 4.4.1 (2024-06-14)
Platform: wasm32-unknown-emscripten (32-bit)
Running under: emscripten

Matrix products: default

locale:
[1] en_US.UTF-8 C en_US.UTF-8 en_US.UTF-8 en_US.UTF-8 C

time zone: America/New_York
tzcode source: internal

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] bslib_0.8.0 shiny_1.9.1.8002

loaded via a namespace (and not attached):
[1] digest_0.6.37 later_1.3.2 R6_2.5.1 codetools_0.2-20
[5] httpuv_1.6.6.9000 fastmap_1.2.0 webr_0.4.2 magrittr_2.0.3
[9] cachem_1.1.0 glue_1.7.0 memoise_2.0.1 htmltools_0.5.8.1
[13] lifecycle_1.0.4 promises_1.3.0 cli_3.6.3 xtable_1.8-4
[17] sass_0.4.9 jquerylib_0.1.4 withr_3.0.1 renv_1.0.7
[21] tools_4.4.1 mime_0.12 Rcpp_1.0.13 fs_1.6.3.9000
[25] rlang_1.1.4 jsonlite_1.8.8

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the supplied app using page_navbar() with fillable = TRUE and compare it with fillable = FALSE, focusing on how the footer responds as the page content changes size. Trace the page_navbar() layout entry point and identify the existing footer behavior. Done means the footer stays at the bottom for the fillable layout while remaining below all content as the page grows.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, r, sass
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.