Inline Boxes within a Parent Box

[FreyGeospatial]

I am trying to create a box that contains several other boxes, have them horizontally aligned, and span equal-distances across the page no matter how big or small the window is. I was able to get the boxes in-line using a div(), but cannot seem to make them equidistant in width. Is this an unsupported feature in bs4Dash, or am I going about it wrong? I would like to put in a feature request for this if it cannot be done.

if (interactive()) {
  library(shiny)
  library(bs4Dash)
  
  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        fluidRow(
        box(width = 12, div(style="display: inline-block;vertical-align:top;", box(
          solidHeader = FALSE,
          title = "Status summary",
          background = NULL,
          width = 12,
          status = "danger",
          footer = fluidRow(
              descriptionBlock(
                number = "17%", 
                numberColor = "pink", 
                numberIcon = icon("caret-up"),
                header = "$35,210.43", 
                text = "TOTAL REVENUE", 
                rightBorder = TRUE,
                marginBottom = FALSE

            ),
              descriptionBlock(
                number = "18%", 
                numberColor = "secondary", 
                numberIcon = icon("caret-down"),
                header = "1200", 
                text = "GOAL COMPLETION", 
                rightBorder = FALSE,
                marginBottom = FALSE
            )
          )
        )),
        div(style="display: inline-block;vertical-align:top;", box(title = "second box", width = 12))
        )
        )
      ),
      title = "Description Blocks"
    ),
    server = function(input, output) { }
  )
}

[DivadNojnarg]

Hi,

Try this with boxLayout, from here:

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        boxLayout(
          type = "deck",
          box(
            solidHeader = FALSE,
            title = "Status summary",
            background = NULL,
            width = NULL,
            status = "danger",
            footer = fluidRow(
              descriptionBlock(
                number = "17%", 
                numberColor = "fuchsia", 
                numberIcon = icon("caret-up"),
                header = "$35,210.43", 
                text = "TOTAL REVENUE", 
                rightBorder = TRUE,
                marginBottom = FALSE
                
              ),
              descriptionBlock(
                number = "18%", 
                numberColor = "secondary", 
                numberIcon = icon("caret-down"),
                header = "1200", 
                text = "GOAL COMPLETION", 
                rightBorder = FALSE,
                marginBottom = FALSE
              )
            )
          ),
          box(title = "second box", width = NULL)
        )
      )
    ),
    title = "Description Blocks"
  ),
  server = function(input, output) { }
)

Anyway, there is an issue in bs4Dash, the card comes with an extra div wrapper which does not look nice.

[lhabegger]

Hey David

just stumbled across this issue, since I experienced issues when trying to implement the "card-deck" behaviour to get boxes with equal height, no-matter the content size. I found the additional wrapping div to cause display issues (while the cards ARE equal height, it looks as if they are not, because only the additional div inherits the colors etc and is itself sized according content.

What is the reason to have this extra wrapping div?

I created a custom function of the box simply removing it: original :

shiny::tags$div(class = if (!is.null(width)) 
        paste0("col-sm-", width), cardTag, shiny::tags$script(type = "application/json", 
        `data-for` = id, jsonlite::toJSON(x = props, auto_unbox = TRUE, 
            json_verbatim = TRUE)))

to:

tagList(cardTag, shiny::tags$script(type = "application/json", 
                                                          `data-for` = id, jsonlite::toJSON(x = props, auto_unbox = TRUE, 
                                                                                            json_verbatim = TRUE)))

which works nicely for me. Also setting the class for custom width (e.g. col-sm-6) directly on the main cardTag div works for me, so I am wondering if there is any special case, where the additional div is required.