【问题标题】:Footer alignment in shiny app dashboard闪亮的应用仪表板中的页脚对齐
【发布时间】:2016-12-20 18:12:06
【问题描述】:

我正在尝试在页面底部和中心的闪亮应用仪表板中插入页脚。但它正在进入身体的中心。我也无法将它放在页面底部

这是我的代码:

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')
  })
})

【问题讨论】:

    标签: r dashboard shiny


    【解决方案1】:

    您可以将dashbordPage 包装成tagList,然后将tags$footer 作为tagList 的第二个参数。您还可以使用 css 进一步修改页脚的样式。


    完整示例:

    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)
    

    【讨论】:

    • 我们也可以将页脚放在仪表板侧边栏上吗?
    • 当然,在页脚的样式中加上z-index: 1000;就可以轻松搞定。我已经更新了这个例子。 (侧边栏也有这个属性,它设置为 810。我必须选择一个更大的数字)Here more about z-index
    • 我又上传了一个问题,你能帮帮我吗?
    • 当与左侧的导航栏一起使用时,我必须将 left: 230px; 添加到 style 以使页脚跨越 100%。我不知道如何使用来自服务器输出的数据动态填充页脚
    猜你喜欢
    • 1970-01-01
    • 2015-04-22
    • 2018-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-12
    • 2023-03-13
    相关资源
    最近更新 更多