ShinyDashboard - displaying more than 3 infoBoxes on the same row

Question

I want to display 4 infoBoxes (or valueBoxes, I don't really care) in the same row, and it just doesn't seem to work...

This is a working simplified version of the code, based on the shinydashbaord tutorial on Rstudio wesite (mine is using infoBoxOutputs, but I guess it doesn't matter for the formatting here):

ui <- dashboardPage(
  dashboardHeader(title = "Info boxes"),
  dashboardSidebar(),
  dashboardBody(
    # infoBoxes with fill=FALSE
    fluidRow(
      infoBox("1st", 10 * 2, icon = icon("credit-card")),
      infoBox("2nd", 10 * 2, icon = icon("credit-card")),
      infoBox("3rd", 10 * 2, icon = icon("credit-card")),
    )
  )
)

which displays 3 infoBoxes in the same line. However once I add one more infoBox, it moves to a new line:

ui <- dashboardPage(
  dashboardHeader(title = "Info boxes"),
  dashboardSidebar(),
  dashboardBody(
    # infoBoxes with fill=FALSE
    fluidRow(
      infoBox("1st", 10 * 2, icon = icon("credit-card")),
      infoBox("2nd", 10 * 2, icon = icon("credit-card")),
      infoBox("3rd", 10 * 2, icon = icon("credit-card")),
      infoBox("4th", 10 * 2, icon = icon("credit-card")),
    )
  )
)

I also tried using columns - the boxes were then displays on the same row, but were distorted.

Any ideas?

Answer 1

Within a fluidRow from shiny, we know that it has a max column width of 12.

Taking a look at the infoxBox function:

infoBox(title, value = NULL, subtitle = NULL,
  icon = shiny::icon("bar-chart"), color = "aqua", width = 4,
  href = NULL, fill = FALSE)
}

we see that the setting for width is width = 4.

To get your desired 4 infoBoxes fitted on one row, just set width = 3.

---

An explicit example for all intents and purposes:

library(shiny)
library(shinydashboard)

server <- function(input, output) {
}

ui <- fluidPage(
  fluidRow(
    infoBox("test", value=1, width=3),
    infoBox("test", value=2, width=3),
    infoBox("test", value=3, width=3),
    infoBox("test", value=4, width=3)
  )
)

shinyApp(ui = ui, server = server)

Yielding: