愿所有的美好和期待都能如约而至

闪亮的仪表板页面锁定仪表板页眉在顶部

发布时间:  来源:互联网  作者:匿名  标签:css error Shiny Dashboadpage lock dashboardHeader on top exception IT资讯 r shiny   热度:37.5℃

本文介绍了闪亮的仪表板页面锁定仪表板页眉在顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用R SHINY Dashboard Page来构建我的交互式仪表板。我要锁定仪表板标题和侧栏菜单,以便滚动时标题和侧栏保持在同一位置。

对于侧边栏菜单,这可以在css中完成:

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

但是,当您对DashboardHeader尝试相同的技巧时,它失败了。它将下拉菜单(通知图标)放在左侧,而不是右上角。

如何才能在不更改闪亮应用程序设计的情况下修复页眉?

最小工作示例:

附录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/stom.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;
}

推荐答案

AdminLte(shinydashboard使用的框架)有一个固定的布局(参见here),您可以在您的应用程序中通过在您的UI中添加以下行来激活它:

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

(例如dashboardBody中)

注意:这将对页眉和侧边栏应用固定布局。

这篇关于闪亮的仪表板页面锁定仪表板页眉在顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP