How can I get the custom background color in shiny mainpanel without white space

Question

I want to use custom company colors in my shiny app. Below is a mock version of my app which shows the issue I face. The issue is I cannot set the background color (#f2f0eb) properly, as you see there is a white bar above the chart which does not get the background color #f2f0eb. The navigation bar, selection box and bottom white bar are fine.

So to be clear I want to get rid off the white bar above the chart, it should have the same brownish color (#f2f0eb) as the rest off the background main panel color.

I have checked out this thread, but couldn't get it to solve my issue; StackOverflow thread add customized color for status paramater

I am not very proficient with CSS so please incorporate any answers into the R code posted below

 #test ## Packages ---- library(shiny);library(shinydashboard);library(shinydashboardPlus); library(plyr);library(dplyr);library(dbplyr);library(tidyr); library(ggplot2);library(scales);library(stringr);library(plotly) library(ggiraph) ## Header ---- header <- dashboardHeader(title = span("Test app StackOverFlow", style = "font-size: 18px")) ## Sidebar ---- sidebar <- dashboardSidebar( disable = FALSE, width = 230, sidebarMenu( tags$br(), textOutput("text1"), tags$br(), sidebarMenu(id="menu1", menuItem("Test", tabName = "PERF", icon = icon("arrow-right", verify_fa = FALSE), menuSubItem('blabla',tabName = 'kpi_1'), menuSubItem('blablabla',tabName = 'kpi_2')) ) ) ) # Body---- body <- dashboardBody( # Set color ---- tags$head(tags$style(HTML(' body { background-color: #f2f0eb; }.box { border-top: 0px; box-header with-border:0px; } /* logo */.skin-blue.main-header.logo { background-color: #109FC6; } /* logo when hovered */.skin-blue.main-header.logo:hover { background-color: #ce5368; } /* navbar (rest of the header) */.skin-blue.main-header.navbar { background-color: #f2f0eb; } /* main sidebar */.skin-blue.main-sidebar { background-color: #109FC6; } /* active selected tab in the sidebarmenu */.skin-blue.main-sidebar.sidebar.sidebar-menu.active a{ background-color: #ce5368; } /* other links in the sidebarmenu */.skin-blue.main-sidebar.sidebar.sidebar-menu a{ background-color: #109FC6; color: #000000; } /* other links in the sidebarmenu when hovered */.skin-blue.main-sidebar.sidebar.sidebar-menu a:hover{ background-color: #ce5368; } /* toggle button when hovered */.skin-blue.main-header.navbar.sidebar-toggle:hover{ background-color: #ce5368;} /* body */.content-wrapper, .right-side { background-color: #f2f0eb; }.tabs-above >.nav > li[class=active] > a { background-color: #ce5368; color: #ce5368;}.tabbable >.nav > li > a {background-color: #ce5368; color:black} '))), # Selection buttons on top---- fluidRow(tags$head(tags$style(HTML('.box{-webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none;}'))), # remove grey line around chart column(selectInput("selectclient", "Select choice:", choices = list("A" = "A1","B" = "B2","C" = "C2","D" = "D2"), selected = "A"), width = 2) ), tabItems( # KPI1 tabItem(tabName = 'kpi_1', tabPanel('Performance', box( style = "background-color:#f2f0eb box-header with-border:0px;", shinycssloaders::withSpinner(plotlyOutput("chart_kpi1")), width = 12)), ) ) ) ## ui---- ui <- dashboardPage(header, sidebar, body, footer = dashboardFooter( left = "Developed and maintained by", right = "For questions email:" )) # Define server logic required to draw a histogram server <- function(input, output) { output$chart_kpi1 = renderPlotly({ x <- c(1:100) random_y <- rnorm(100, mean = 0) data <- data.frame(x, random_y) plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines') %>% layout(paper_bgcolor = "#f2f0eb", plot_bgcolor = "#f2f0eb", fig_bgcolor = "#f2f0eb") }) } # Run the application shinyApp(ui = ui, server = server)

Answer 1

It has to do with the <div class = "box"> generated by shinydashboard::box() . It has a top border. Add this to your css code to get rid of it:

.box {
   border-top: 0px;
} 

And incorporated in your entire app:

#test
## Packages ----
library(shiny);library(shinydashboard);library(shinydashboardPlus);
library(plyr);library(dplyr);library(dbplyr);library(tidyr);
library(ggplot2);library(scales);library(stringr);library(plotly)
library(ggiraph)

## Header ----
header <- dashboardHeader(title = span("Test app StackOverFlow", style = "font-size: 18px"))

## Sidebar ----
sidebar <- dashboardSidebar(
  disable = FALSE,
  width = 230,
  sidebarMenu(
    tags$br(),
    textOutput("text1"),
    tags$br(),
    sidebarMenu(id="menu1",
                menuItem("Test", tabName = "PERF", icon = icon("arrow-right", verify_fa = FALSE),
                         menuSubItem('blabla',tabName = 'kpi_1'),
                         menuSubItem('blablabla',tabName = 'kpi_2'))
    )
    
  )
)

# Body----
body <- dashboardBody(
  # Set color ----
  tags$head(tags$style(HTML('
        body {
                background-color: #f2f0eb;
        }
        /* Get rid of the box border */      
        .box {
          border-top: 0px;
        }      
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #109FC6;
                              }
        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #ce5368;
                              }
        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #f2f0eb;
                              }
        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #109FC6;
                              }
        /* active selected tab in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: #ce5368;
                              }
        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #109FC6;
                              color: #000000;
                              }
        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #ce5368;
                              }
        /* toggle button when hovered  */
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ce5368;}

                              /* body */
                                .content-wrapper, .right-side {
                                background-color: #f2f0eb;
                                }

        .tabs-above > .nav > li[class=active] > a {
           background-color: #ce5368;
           color: #ce5368;}
        .tabbable > .nav > li > a                  {background-color: #ce5368;  color:black}
        
                              '))),
  
  # Selection buttons on top----
  fluidRow(tags$head(tags$style(HTML('.box{-webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none;}'))), # remove grey line around chart
           column(selectInput("selectclient", "Select choice:", choices = list("A" = "A1","B" = "B2","C" = "C2","D" = "D2"),
                              selected = "A"), width = 2)
  ),
  
  tabItems(
    # KPI1
    tabItem(tabName = 'kpi_1',
            tabPanel('Performance', box(
              style = "background-color:#f2f0eb; border-top: 0px;",
              shinycssloaders::withSpinner(plotlyOutput("chart_kpi1")), width = 12)),
    )
  )
  
)

## ui----
ui <- dashboardPage(header, sidebar, body)

# Define server logic required to draw a histogram
server <- function(input, output) {
  
  output$chart_kpi1 = renderPlotly({
    
    x <- c(1:100)
    random_y <- rnorm(100, mean = 0)
    data <- data.frame(x, random_y)
    
    plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines') %>% 
      layout(paper_bgcolor = "#f2f0eb",
             plot_bgcolor  = "#f2f0eb",
             fig_bgcolor   = "#f2f0eb")
  })
  
}


# Run the application 
shinyApp(ui = ui, server = server)

Answer 2

If I change the box to column it solves the issue (big thanks to my anonymous colleague).

so this

  tabItem(tabName = 'kpi_1',
        tabPanel('Performance', box(
          style = "background-color:#f2f0eb; border-top: 0px;",
          shinycssloaders::withSpinner(plotlyOutput("chart_kpi1")), width = 12)),
)

should be this:

  tabItem(tabName = 'kpi_1',
            tabPanel('Performance', column(
              style = "background-color:#f2f0eb; border-top: 0px;",
              shinycssloaders::withSpinner(plotlyOutput("chart_kpi1")), width = 12)),
    )