I am attempting to align two shiny InfoBoxes side by side within a fluid row, each taking up half of the full width. Despite specifying a width of 6 (half of bootstrap's 12), the Div Class is displaying as col-sm-4 (#shiny-html-output col-sm-4) and causing the boxes to occupy 2/3 of the width instead (4+4 twelfths).
Additionally, I am interested in directly setting the skin color to orange, rather than the closest option available which is yellow. It seems like I may need to override this with CSS.
library(shiny)
library(shinydashboard)
dashboard_colour <- "orange"
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Overview", tabName = "overview", icon = icon("dashboard"))
)
)
body <- dashboardBody(
tabItems(
tabItem(tabName = "overview",
h2("Overview"),
fluidRow(
infoBoxOutput("boxLeft"),
infoBoxOutput("boxRight")
)
)
)
)
ui <- dashboardPage(
skin = "yellow",
dashboardHeader(title = "Orange Dashboard"),
sidebar,
body
)
server <- function(input, output) {
output$boxLeft <- renderValueBox({
infoBox(
123, "No on Left",
icon = icon("arrow-alt-circle-left", class = "infoIcon"),
color = dashboard_colour,
width = 6
)
})
output$boxRight <- renderValueBox({
infoBox(
456, "No on Right",
icon = icon("arrow-alt-circle-right", class = "infoIcon"),
color = dashboard_colour,
width = 6
)
})
}
# Run the application
shinyApp(ui = ui, server = server)