Search code examples
rshinyshinydashboardflexdashboard

shiny fitting more than three value box in a row


I am developing a test ShinyApp with 7 or 8 valueBox. Everything is working fine except, shiny is adding three valueBox per row. Right now I have three rows on top that is displaying these 7 valueBox. I tried changing the width parameter, and its not working. This is my code below.

My goal is to have 5 valueBox per row instead of the default three. Any advise is much appreciated.

## Only run this example in interactive R sessions

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dynamic boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(

      valueBoxOutput("vbox1"),
      valueBoxOutput("vbox2"),
      valueBoxOutput("vbox3"),
      valueBoxOutput("vbox4"),
      valueBoxOutput("vbox5"),
      valueBoxOutput("vbox6"),
      valueBoxOutput("vbox7"),
      valueBoxOutput("vbox8")

    )
  )
)

server <- function(input, output) {

  output$vbox1 <- renderValueBox({ valueBox( "One","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox2 <- renderValueBox({ valueBox( "Two","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox3 <- renderValueBox({ valueBox( "Skip","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox4 <- renderValueBox({ valueBox( "a Two","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox5 <- renderValueBox({ valueBox( "Then","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox6 <- renderValueBox({ valueBox( "some","Yes", width = 2, icon = icon("stethoscope"))})
  output$vbox7 <- renderValueBox({ valueBox( "a hundred too","Yes", width = 2, icon = icon("stethoscope"))})

}

shinyApp(ui, server)

Shiny Output with Three ValueBox per row


Solution

  • We could set the width in valueBoxOutput

    ui <- dashboardPage(
      dashboardHeader(title = "Dynamic boxes"),
      dashboardSidebar(),
      dashboardBody(
        fluidRow(
    
          valueBoxOutput("vbox1", width = 2),
          valueBoxOutput("vbox2", width = 2),
          valueBoxOutput("vbox3", width = 2),
          valueBoxOutput("vbox4", width = 2),
          valueBoxOutput("vbox5", width = 2)),
          fluidRow(
          valueBoxOutput("vbox6", width = 2),
          valueBoxOutput("vbox7", width = 2),
          valueBoxOutput("vbox8", width = 2)
    
        )
      )
      )
    

    -output

    enter image description here