【问题标题】:Shiny Dashboard: Sticky Footer in dashboardSidebar闪亮的仪表板:仪表板侧边栏中的粘滞页脚
【发布时间】:2016-05-09 19:01:52
【问题描述】:

我正在尝试在dashboardSidebar 中构建一个带有页脚的闪亮仪表板,它粘在视口的底部。为此,我尝试使用here 建议的自定义 CSS 样式(谷歌搜索“页脚底部引导程序”时的众多搜索结果之一):

# create an example for the SO question on sticky footer
library(shiny)
library(shinydashboard)

# sidebar
so_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      text = "Some text."
    )
  ),
  # footer here
  tags$footer(
    tags$p("Footer message here."), 
    style = "
      * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
  }
  .footer, .push {
    height: 155px; /* .push must be the same height as .footer */
  }

  /*

  Sticky Footer by Ryan Fait
  http://ryanfait.com/

  */"
  )

)

# compose the dashboard
so_ui = dashboardPage(
  header = dashboardHeader(
    title = "SO question"
  ), 
  sidebar = so_sidebar, 
  body = dashboardBody()
)

# run the application
shiny::shinyApp(
  ui = so_ui, 
  server = shinyServer(function(input, output) {})
)

由于我以前从未使用过自定义 CSS,因此我不确定我是否正确使用了 CSS。我正在遵循here 的指示。

有人可以帮助获得正确的 CSS,或者对粘在 Shiny Dashboard 侧边栏中可视区域底部的页脚提出任何其他建议吗?

【问题讨论】:

    标签: css r shiny shinydashboard


    【解决方案1】:

    试试this

     <div>
        Sticky Footer
    </div> 
    
    div{
      position:fixed;
      bottom:0;
      right:0;
      left:0;
      background:#00adfc;
      padding:10px;
      box-sizing:border-box;
    }
    

    固定位置始终停留在指定位置,给人一种粘腻的感觉。

    【讨论】:

    • 谢谢。但是,这不是 Shiny 特定的,我不知道如何实现。 Shiny 是一个通过编写 R 代码来生成 HTML 代码的 R 框架。
    • 实际上,我已经将它与 Shiny 一起使用——我将更新问题中的 Shiny 代码并将其标记为正确。不过我还有一个问题。我怎样才能在这个文本上方获得一个也锚定到视口底部的图像?
    • 在 R 风格中,您可以通过创建 css 类(例如 .sticky_footer { position:fixed; bottom:0; right:0; left:0; background:#3c8dbc; z-index: 1000; opacity: 0.9; })将 css 添加到 www/ 文件夹中的 css 文件中。然后,您可以在dashboardBody 中添加divdiv(class = "sticky_footer", p("test footer"))
    猜你喜欢
    • 2020-10-21
    • 2018-12-24
    • 1970-01-01
    • 2019-12-21
    • 2016-12-05
    • 2015-04-22
    • 1970-01-01
    • 2016-11-24
    • 1970-01-01
    相关资源
    最近更新 更多