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)

score 2 · Answer 1 · answered Nov 18 '22 at 09:12

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

VvdL · Answer 2 · 2022-11-17T14:12:19.790

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)

Thanks for the quick reply. I used the latest code chunk and did a run but I get the same ourput (and thus the issue remains..) — Jelle Jansen, Nov 17 '22 at 14:20
Weird, the bar is gone for me. I checked in Edge and Chrome. Are you using a different browser? You could try this in case it's a browser issue: `.box {border-top: 0px !important;} ` — VvdL, Nov 17 '22 at 14:33
I tried both chrome and edge. Also with the '!important" added still gives me the white box — Jelle Jansen, Nov 17 '22 at 14:39
I'm afraid I can't reproduce it then. You could try to rightclick that white area and choosing inspect in your browser. Here you can see what div class is causing the white area and then fiddle with that css part. — VvdL, Nov 17 '22 at 15:06
great suggestion. I added a picture to the thread that shows where the css code of the white box is. subsequently I added adjusted the code (also in the thread) with the following (but did not manage to solve it with this): .box { border-top: 0px; box-header with-border:0px; } box-header with-border:0px — Jelle Jansen, Nov 17 '22 at 15:51
That gets us closer! Try `.box-header { border-top: 0px;}` or `.with-border{border-top: 0px !important;}` — VvdL, Nov 17 '22 at 16:03
Thanks so much for all the help. I eventually solved it in the R code, not CSS. will post the answer below — Jelle Jansen, Nov 18 '22 at 09:10

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

2 Answers2