簡體   English   中英

閃亮的儀表板:儀表板側欄中的粘性頁腳

[英]Shiny Dashboard: Sticky Footer in dashboardSidebar

我正在嘗試在dashboardSidebar使用頁腳構建一個Shiny Dashboard,它粘貼到視口的底部。 為此,我試圖使用這里建議的自定義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。 我按照這里的說明操作。

有人可以幫助獲得這個CSS,或者在Shiny Dashboard側邊欄的可視區域底部粘貼的頁腳上有任何其他建議嗎?

試試這個

 <div>
    Sticky Footer
</div> 

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

固定位置始終保持在指定位置並給人一種粘膩感。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM