I use R Shiny Dashboardpage to build my interactive dashboard. I want to lock the dashboardHeader and sidebarMenu so that when scrolling, the header and sidebar remain on the same position.
For the sidebarMenu, this can be done in the CSS:
.skin-blue .main-sidebar {
position: fixed;
overflow: visible;
}
However, when you try the same trick for the dashboardHeader, it fails. It places the dropdownMenus (the notification icons) on the left, instead of on the top right corner.
How can I fix the header without changing the design of my Shiny application?
Minimal working example:
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;
}
AdminLte (the framework used by shinydashboard
) had a fixed layout (see here), you can activate it in your app by putting this line somewhere in your UI :
tags$script(HTML("$('body').addClass('fixed');"))
(in dashboardBody
for example)
Note : This will apply a fixed layout to the header AND the sidebar.