valueBox not changing color and uncentered

Question

I'm trying to add a value box to my shiny dashboard within a renderUi wrapper. So far, I've only found the valueBox function (although, I'm open to others, as it is very restrictive). However, it doesn't change color (see screenshot), despite me giving it a valid color argument. In addition, the text is not centered.

I'd ideally like to keep my layout with the main panel and side bar as well.

I'll accept any answer if it 1) can get valueBox to be "navy", centered, and with white text or 2) can suggest another function that can accomplish the same goals (with a huge bonus being if I could have more flexibility with the colors).

Reproducible example:

library(shinydashboard)
library(shiny)
ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            valueBoxOutput("total_projects")
            )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))

    
    output$total_projects <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
        num_100s <- data %>% filter(grade == 100) %>% nrow()
        valueBox(value = num_100s, subtitle = "Number of Perfect Scores",
                 color = "navy", width = 3) #setting color argument but it shows up white
        }
    })
}
shinyApp(ui, server)

Note: The value box should be navy.

score 1 · Answer 1 · 2021-06-14T21:16:30.360

1

Does this answer your question? It's centered and navy colored by using shiny UI functions/div/css instead of the valueBox options.

library(shinydashboard)
library(shiny)
library(dplyr)

ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            fluidRow(column(12,align="center",div(valueBoxOutput("total_projects"),style="color:white;"),style="background-color:navy;"))
        )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_projects <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = num_100s, subtitle = "Number of Perfect Scores",
                     color = "navy", width = 3) #setting color argument but it shows up white
        }
    })
}
shinyApp(ui, server)

edited Jun 14 '21 at 21:16

answered Jun 14 '21 at 18:36

1

that fixes the centered issue, thank you! For color, I wanted the background of the box to be navy but the text to be white. – J.Sabree Jun 14 '21 at 18:39
I've edited my answer to make those changes – Jun 14 '21 at 21:16
Additionally you may want to check out the accepted answer to this question if you wanted to change the background color of just the box itself: https://stackoverflow.com/questions/40647936/r-shinydashboard-custom-css-to-valuebox – Jun 14 '21 at 21:34
I tried running your code, but I get an error saying that width = 3 isn't used. I deleted it and get an error about not using the icon argument, which I set to NULL. However, then it runs but my box doesn't look neat like yours--it extends the entire length of the dashboard, has a long white box under it, and makes the "2" navy. Any ideas on what's happening? – J.Sabree Jun 15 '21 at 01:26
disregard my previous comment, after reseting my session, it looks much closer to what you have, although it's still not appearing centered. – J.Sabree Jun 15 '21 at 02:59

valueBox not changing color and uncentered

1 Answers1