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.
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)
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;"))