shinydashboard box background

Question

I cannot figure out why the background color is not working for my shinydashboard app. Each box should contain just the title, description, and button to go to a link, but despite following the github page (https://rstudio.github.io/shinydashboard/structure.html#boxes) example exactly, my page is not displaying colors. Any help with why is much appreciated. Sample code below.

    {
      library('shiny')
      library('shinydashboard')
    }

    # UI

    ui<-fluidPage(
      titlePanel("Sample Code"),
      fluidRow(
        column(6,
               h1("Sample 1"),

               shinydashboard::box(title = "Google", "Description for Google", solidHeader = TRUE, background = "green",
                                   br(),
                                   shiny::actionButton(inputId='link1', label="Go To Google", 
                                                       onclick ="window.open('https://google.com', '_blank')")
               ),



               shinydashboard::box(title = "Stack Overflow", "Description for Stack Overflow", solidHeader = TRUE, background = "blue",
                                   br(),
                                   shiny::actionButton(inputId='link2', label="Go To Stack", 
                                                       onclick ="window.open('https://stackoverflow.com/', '_blank')")
               )

        )
      ))


    #SERVER
    server<-function(input,output,session)
    {
    }

    #Run the Shiny App to Display Webpage
    shinyApp(ui=ui, server=server)

SeGa SeGa · Accepted Answer · 2018-05-16T09:15:27

You are using a fluidPage and dashboard-elements. This combination doesnt work. You have to adapt the ui to be fully a dashboardPage like this:

{
  library('shiny')
  library('shinydashboard')
}

# UI

ui<-dashboardPage(
  dashboardHeader(
    title="Sample Code"
  ),
  dashboardSidebar(),
  dashboardBody(
    column(6,
           h1("Sample 1"),

           shinydashboard::box(title = "Google", "Description for Google", solidHeader = TRUE, background = "green",width = 10,
                               br(),
                               shiny::actionButton(inputId='link1', label="Go To Google", 
                                                   onclick ="window.open('https://google.com', '_blank')")
           ),

           shinydashboard::box(title = "Stack Overflow", "Description for Stack Overflow", solidHeader = TRUE, background = "blue",width = 10,
                               br(),
                               shiny::actionButton(inputId='link2', label="Go To Stack", 
                                                   onclick ="window.open('https://stackoverflow.com/', '_blank')")
           )

    )
  ))


#SERVER
server<-function(input,output,session)
{
}

#Run the Shiny App to Display Webpage
shinyApp(ui=ui, server=server)

I also added the width=10 argument to the boxes, otherwise they are not displayed nicely.

shinydashboard box background

1 Answers