CODEWITHSUNDEEP
rshinyshinydashboard
KeshetE
KeshetE

Reputation: 395

ShinyDashboard - displaying more than 3 infoBoxes on the same row

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?

Upvotes: 4

Views: 6485

Answers (3)

Filipe Rigueiro
Filipe Rigueiro

Reputation: 57

library(shiny)
library(shinydashboard)

server <- function(input, output) {
}

ui <- fluidPage(
  fluidPage(                      ##Change for fluidPage
     mainPanel(width = 12,        ##HERE 
      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)

This seems to work for me. My app had the same issue.

Upvotes: 0

KeshetE
KeshetE

Reputation: 395

Apparently this is what I was looking for:

In the server.R: set the value boxes with width = 3:

output$infoBox1 <- renderValueBox({..., valueBox(...,width = 3)})

In the UI.R: put 4 columns with the valueBoxOutputs, in this manner:

column( 3,valueBoxOutput("infoBox1", width = 12))

Upvotes: 4

Steven_
Steven_

Reputation: 748

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:

enter image description here

Upvotes: 8

Related Questions