9

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;
}
ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
Dendrobates
  • 3,294
  • 6
  • 37
  • 56

1 Answers1

14

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.

Victorp
  • 13,636
  • 2
  • 51
  • 55
  • Works perfectly! Thanks a lot! – Dendrobates Aug 16 '17 at 08:42
  • How can I combine this with a fix-width of the wrapper? I want my dashboard to have a max-width of 2000px. Hence in my css I included `.wrapper {width: 2000px;left: auto;margin-right: auto;}`. On displays with high resolution, this results in the left sidebar being on the absolute left, outside of the wrapper. Struggling for hours to fix this... Any suggestions? – Dendrobates Aug 16 '17 at 12:22
  • Don't think that's possible... There is a "boxed layout" (https://adminlte.io/themes/AdminLTE/pages/layout/boxed.html) but it don't work with "fixed layout", you'll have to choose. Nonetheless you can put a max-width on the body (but sidebar will still be on the left) : `tags$style(HTML(".content {max-width: 1200px; margin: auto;}"))` – Victorp Aug 16 '17 at 12:55