R Shiny - Multiple valueBoxes in 1 row

Question

I am fairly new to R Shiny and I would like to create 1 row with 8 valueBoxes. I used the code below but it is not showing all boxes on the same row. I tried setting the width to 1.5 (given the Bootstrap width of 12, divided over 8 boxes), but it doesn't seem to accept decimal values. Any ideas?

  fluidRow( 
    valueBoxOutput("box1"),
    valueBoxOutput("box2"),
    valueBoxOutput("box3"),
    valueBoxOutput("box4"),
    valueBoxOutput("box5"),
    valueBoxOutput("box6"),
    valueBoxOutput("box7"),
    valueBoxOutput("box8")
  )

Answer 1

You can make use of shiny's grid layout by placing each object in a separate column. Try:

 fluidRow( 
    column(1, valueBoxOutput("box1")),
    column(1, valueBoxOutput("box2")),
    column(1, valueBoxOutput("box3")),
    column(1, valueBoxOutput("box4")),
    column(1, valueBoxOutput("box5")),
    column(1, valueBoxOutput("box6")),
    column(1, valueBoxOutput("box7")),
    column(1, valueBoxOutput("box8"))
  )

Answer 2

You can use splitLayout :

library(shinydashboard)

shinyApp(
  ui = fluidPage(
    splitLayout(
      valueBoxOutput("box1"),
      valueBoxOutput("box2"),
      valueBoxOutput("box3"),
      valueBoxOutput("box4"),
      valueBoxOutput("box5"),
      valueBoxOutput("box6"),
      valueBoxOutput("box7"),
      valueBoxOutput("box8")
    )
  ),
  server = function(input, output){
    output$box1 <- renderInfoBox({
      infoBox(
        "box1",
        "A",
        icon = icon("credit-card")
      )
    })
    output$box2 <- renderInfoBox({
      infoBox(
        "box2",
        "B",
        icon = icon("credit-card")
      )
    })
    output$box3 <- renderInfoBox({
      infoBox(
        "box3",
        "C",
        icon = icon("credit-card")
      )
    })
    output$box4 <- renderInfoBox({
      infoBox(
        "box4",
        "D",
        icon = icon("credit-card")
      )
    })
    output$box5 <- renderInfoBox({
      infoBox(
        "box5",
        "E",
        icon = icon("credit-card")
      )
    })
    output$box6 <- renderInfoBox({
      infoBox(
        "box6",
        "F",
        icon = icon("credit-card")
      )
    })
    output$box7 <- renderInfoBox({
      infoBox(
        "box7",
        "G",
        icon = icon("credit-card")
      )
    })
    output$box8 <- renderInfoBox({
      infoBox(
        "box8",
        "H",
        icon = icon("credit-card")
      )
    })
  }
)