How to keep the footer at the bottom in a page_navbar?

[udurraniAtPresage]

In the following app, the footer is shown at the bottom of app view. It moves while scrolling. I don't know if it is the expected behaviour, but shouldn't the footer be always at the bottom that you see after scrolling all the way down? Also, shouldn't the footer be outside the limits of the card?

library(shiny)
library(bslib)

ui <- page_navbar(
  title = "My app",
  footer = tags$footer(
    style = "background-color: #14131326; padding: 0px; text-align: center; position: fixed; bottom: 0; width: 100%;",

    p(
      style = "margin: 0; color: #888;",
      "COMPANY NAME © 2023. All rights reserved."
    ),
    p("Powered by COMPANY NAME")
  ),
  sidebar = "Sidebar",

  nav_panel(
    "Page 1",

    card(
      min_height = "2000px",
      plotOutput("my_plot")
    )
  )
)

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

  output$my_plot <- renderPlot({
    plot(cars)
  })
}

shinyApp(ui, server)

[Osteribo]

this might be of some help https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

try position:absolute

[udurraniAtPresage]

I tried position: absolute but depending on the content height in a page/tab, the footer does not stayat the bottom. The only workaround i found is to keep the content height long by specifying height option e.g, in a card.

[szylinski-sa]

I'd also love to figure this out, and didn't get anywhere with position:absolute.

I'm using page_sidebar, with navset_tab in the main panel. Ideally I'd like a footer that sits at the very bottom of each tab. In smaller-than-viewport tabs, it should appear at the bottom of the viewport, and in tabs longer than the viewport, it should appear below all content.

[thekangaroofactory]

Same here.

I would consider this as a bug as the page_navbar help page states:
footer UI element(s) (htmltools::tags) to display below the nav content.

Result is not below the content (or at least not below the content once filled by it's elements).

If I'm right, position:absolute can't work unless the whole content of ... argument is set with position:relative

[gadenbuie]

First, you can remove position: fixed; bottom: 0; width: 100%;". The position: fixed means that the element should appear at the bottom of the viewport, which is not what you're wanting.

Then you have a few options:

1. Disable filling layout of the nav_panel() with the tall plot. In page_navbar(), either set fillable = FALSE or give fillable the names of other tabs that should be fillable.
2. Disable the minimum height of the card with the plot. The footer will appear after the card and inside the filled page.
3. Or you instead make the plot height="2000px" rather than the card and the plot will scroll within the card and the footer will be at the bottom of the window.

[thekangaroofactory]

In my case, setting fillable = FALSE for the page_navbar() fixed it - thanks a lot for your help!

[szylinski-sa]

That works to add a footer after content, but doesn't anchor it to the bottom of the page when the content is shorter than the viewport. The card height options are really just a workaround and not suitable if you don't want scrollable cards or have other long content like multiple rows of cards. Consider this additional nav_panel page (everything else is the same as the original post, but using fillable=FALSE and minus the position: fixed; bottom: 0; width: 100%; as you suggest):

nav_panel(
    "Page 1",
    
    card(
      min_height = "2000px",
      plotOutput("my_plot")
    )
  ),
  nav_panel(
    "Page 2",
    
    card(
      height = "200px",
      "This page only has short content."
    )
  )

Page 1 looks right- scroll past the plot card, then find the footer at the bottom. But on Page 2, it's not a footer as it appears in the middle, immediately after the short card.