閃亮的Dashboadpage鎖dashboardHeader頂部

我使用R Shiny Dashboardpage來構建我的交互式儀表板。我想鎖定dashboardHeader和sidebarMenu，以便在滾動時，標題和側欄保持在同一位置。閃亮的Dashboadpage鎖dashboardHeader頂部

對於sidebarMenu，這可以在CSS來實現：

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

但是，當你嘗試同樣的伎倆在dashboardHeader，它失敗。它將dropdownMenus（通知圖標）放在左側，而不是放在右上角。

如何修改標題而不更改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)

萬維網/ 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; 
}

來源

2017-08-16 Dendrobates

AdminLte（由shinydashboard使用的框架）具有一個固定的佈局（參見here），你可以在你的應用程序中通過在你的用戶界面中放置這條線來激活它：

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

（在dashboardBody例如）

注意：這將適用的固定佈局到頭部和側欄。

來源

2017-08-16 08:27:13 Victorp

完美的作品！非常感謝！ – Dendrobates

如何將此與包裝的固定寬度結合使用？我希望我的儀表板的最大寬度爲2000px。因此，在我的CSS中包含'.wrapper {width：2000px; left：auto; margin-right：auto;}'。在高分辨率的顯示器上，這會導致左側邊欄位於包裝外部的絕對左側。掙扎數小時來解決這個問題...有什麼建議嗎？ – Dendrobates

不要以爲這是可能的......有一個「盒裝佈局」（https://adminlte.io/themes/AdminLTE/pages/layout/boxed.html），但它不適用於「固定佈局」，你必須選擇。儘管如此，你可以在body上放一個最大寬度（但邊欄仍然在左邊）：'tags $ style（HTML（「。content {max-width：1200px; margin：auto;}」））'' – Victorp

閃亮的Dashboadpage鎖dashboardHeader頂部

回答

相關問題