闪亮的仪表板页面锁定仪表板顶部的标题

Question

我使用 R Shiny Dashboardpage 来构建我的交互式仪表板。我想锁定dashboardHeader和sidebarMenu，以便在滚动时，标题和侧边栏保持在同一位置。

对于 sidebarMenu，这可以在 CSS 中完成：

.skin-blue .main-sidebar {
  position: fixed; 
  overflow: visible;
}

但是，当您对 dashboardHeader 尝试相同的技巧时，它会失败。它将下拉菜单（通知图标）放在左侧，而不是右上角。

如何在不更改 Shiny 应用程序设计的情况下修复标题？

最小的工作示例：

app.R：

## app.R ##
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard",
    dropdownMenu(type = "messages",
      messageItem(
        from = "Sales Dept",
        message = "Sales are steady this month."
      )
    )
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    ## Add some CSS shit to change colors, width, etc.
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
    ),
    fluidRow(
      box(plotOutput("plot1", height = 2500))
    )
  )
)

server <- function(input, output) {
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[1:50]
    hist(data)
  })
}

shinyApp(ui, server)

www/custom.css：

/* logo */
.skin-blue .main-header .logo {
  position: fixed; 
  overflow: visible;
}

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
  position: fixed; 
  overflow: visible;
}        

/* main sidebar */
.skin-blue .main-sidebar {
  position: fixed; 
  overflow: visible;
}

Answer 1

AdminLte（shinydashboard 使用的框架）有一个固定的布局（参见here），您可以通过在您的 UI 中的某处放置这一行来在您的应用中激活它：

tags$script(HTML("$('body').addClass('fixed');"))

（以dashboardBody 为例）

注意：这会将固定布局应用到标题和侧边栏。