Remove the dark space at the top of the right sidebar in a shinydashboardPlus

Question

I have a shinydashboard with a rightsidebar enabled when you press the icon on top right of the app. I would like to remove this darker space above the slider. Is that possible?

library(shiny)
library(shinydashboard)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(),
    rightsidebar = rightSidebar(
      background = "dark",

        sliderInput(
          "obs",
          "Number of observations:",
          min = 0, max = 1000, value = 500
        )


    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) { }
)

Answer 1

Firstly, you should add library(shinydashboardPlus) to your header to indicate you're using that package.

You could opt to not display that HTML div using css. If you inspect element on that blank space, you'll find its class is "nav nav-tabs nav-justified control-sidebar-tabs".

You could add that to your header style. For example:

shinyApp(
   ui = dashboardPagePlus(
    tags$head(
      tags$style(
        HTML(
          ".control-sidebar-tabs {display:none;}"
          )
       )
    ),
   header = dashboardHeaderPlus(
   enable_rightsidebar = TRUE,
   rightSidebarIcon = "gears",
   fixed = T
   ),
   sidebar = dashboardSidebar(),
   body = dashboardBody(),
   rightsidebar = rightSidebar(

     sliderInput(
      "obs",
      "Number of observations:",
      min = 0, max = 1000, value = 500
     )

   ),
   title = "Right Sidebar"
 ),
 server = function(input, output) { }
)

Ideally, you should keep your css in a separate file, and import it in your header. See here for more info.