Footer alignment in shiny app dashboard

Question

I am trying to insert footer in shiny app dashboard in bottom and centre of the page. But it is coming in the centre of the body. Also I am unable to place it in the bottom of the page

Here is my code:

library(shiny)
library(shinydashboard)
library(DT)
library(ggvis)
library(shiny)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(sidebarMenu(
    menuItem("Instructions", tabName = "genIns", icon = icon("info-circle")),
    menuItem("Data", tabName = "data", icon = icon("table"))

  )),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "genIns",
              fluidPage(
                titlePanel("General Instruction will go here"))
      ),
      # Second tab content
      tabItem(tabName = "data",
              sliderInput("bins",
                          "Number of bins:",
                          min = 1,
                          max = 50,
                          value = 30),
              plotOutput("distPlot")
              )

    ),
    tags$footer("My footer", align = "center")
  )
)

server.ui

shinyServer(function(input, output, session) {

  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
})

Michal Majka · Accepted Answer · 2016-08-18T18:47:52.353

You can wrap dashbordPage into tagList and then place tags$footer as a second argument to tagList. You can also further modify the style of your footer with css.

Full example:

library(shiny)
library(shinydashboard)
library(DT)
library(ggvis)
library(shiny)

ui <- tagList(
  dashboardPage(
    dashboardHeader(title = "Dashboard"),
    dashboardSidebar(sidebarMenu(
      menuItem("Instructions", tabName = "genIns", icon = icon("info-circle")),
      menuItem("Data", tabName = "data", icon = icon("table"))

    )),
    dashboardBody(
      tabItems(
        # First tab content
        tabItem(tabName = "genIns",
                fluidPage(
                  titlePanel("General Instruction will go here"))
        ),
        # Second tab content
        tabItem(tabName = "data",
                sliderInput("bins",
                            "Number of bins:",
                            min = 1,
                            max = 50,
                            value = 30),
                plotOutput("distPlot")
        )

      )

    )

  ),#end dashboardPage
  tags$footer("My footer", align = "center", style = "
              position:absolute;
              bottom:0;
              width:100%;
              height:50px;   /* Height of the footer */
              color: white;
              padding: 10px;
              background-color: black;
              z-index: 1000;")

)#end tagList


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

  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
})

shinyApp(ui, server)

Of course, it can be easily done by adding `z-index: 1000;` to the style of the footer. I've updated the example. (Sidebar also has this property and it is set to 810. I had to choose a number bigger than that) [Here more about z-index](http://www.w3schools.com/cssref/pr_pos_z-index.asp) — Michal Majka, Aug 18 '16 at 18:47
I had to add `left: 230px;` to `style` when used with a navigation bar on the left for the footer to span 100%. I couldn't figure out how to dynamically populate the footer with data from the server's output though — Rafs, Mar 31 '21 at 14:25

Footer alignment in shiny app dashboard

1 Answers1