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

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)),
    )

Answer 2

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)