rshinyreactive-programmingshinydashboardrenderui

custom valueboxes in R Shiny are compressed with large white spaces in between them


I'm trying to make custom valueboxes in R Shiny. I've discovered how to change the color of the background, but something is making my value boxes stubby and leaving large gaps in between them. I'd like to display 3 on a line ideally, but even with a width of 4, they appear squished. How can I get them to have more of the red with just a small gap of white in between.

Below is a reproducible example as well as a screenshot.enter image description here

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

red_box_format <- ".inner , p , h3 { background-color: red};"


ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            tags$style(red_box_format),
            column(4,align="center",div(valueBoxOutput("total_perfect"), style= "color: #FFFFFF")),
            column(4,align="center",div(valueBoxOutput("total_fails"), style= "color: #FFFFFF"))
        )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_perfect <- 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")
        }
    })
    
    output$total_fails <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_50s <- data %>% filter(grade == 50) %>% nrow()
            valueBox(value = num_50s, subtitle = "Number of Failures")
        }
    })
    
}
shinyApp(ui, server)

Solution

  • Insert the outputs in a fluidRow; they will be placed better in the bootstrapp grid:

    mainPanel(
          fluidRow(
          tags$style(red_box_format),
          valueBoxOutput("total_perfect"),
          valueBoxOutput("total_fails")
        ))
    

    Then, you have to render them like this in the server:

    valueBox(value = tags$p(num_100s, style = "text-align:center;color: #FFFFFF;"),
                   subtitle = tags$p("Number of Perfect Scores", style = "text-align:center;color: #FFFFFF;"))