How to make bs4Dash Box within Box appear inline and with equal widths

Question

Using bs4Dash, 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.

This is my reproducible example:

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) { }
  )
}

score 0 · Answer 1 · answered May 27 '22 at 02:01

I'm not sure if you've answered this question since you posted it, but it might be useful for others.

In bs4Dash, the key is to use constant combinations of fluidRow(column(width = X, box(width = NULL))) even within boxes.

For example, a box with two boxes inside of it might look like this:

column(width = 12,
       box(width = NULL, title = "Main box",
           fluidRow(
                    column(width = 6,
                           box(width = NULL, title = "Internal box 1")
                          ),
                    column(width = 6,
                           box(width = NULL, title = "Internal box 2")
                          )
                     )
         )
        )

Here's a reproducible example that should achieve your outcomes:

  library(shiny)
  library(bs4Dash)
  
  ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        fluidRow(
          column(width = 12,
                 box(width = NULL,
                         fluidRow(
                           column(width = 6,
                                  box(
                                    solidHeader = FALSE,
                                    title = "Status summary",
                                    background = NULL,
                                    width = NULL,
                                    status = "danger",
                                    footer = fluidRow(
                                      column(width = 6,
                                             descriptionBlock(
                                               number = "17%", 
                                               numberColor = "pink", 
                                               numberIcon = icon("caret-up"),
                                               header = "$35,210.43", 
                                               text = "TOTAL REVENUE", 
                                               rightBorder = TRUE,
                                               marginBottom = FALSE
                                               
                                             )
                                             ),
                                      column(width = 6, 
                                             descriptionBlock(
                                               number = "18%", 
                                               numberColor = "secondary", 
                                               numberIcon = icon("caret-down"),
                                               header = "1200", 
                                               text = "GOAL COMPLETION", 
                                               rightBorder = FALSE,
                                               marginBottom = FALSE
                                             )
                                             )
                                    )
                                  )
                           ),
                           column(width = 6,
                                 box(title = "second box", width = NULL))
                           )
                         )                 
                 )
                 )
                 )

        )

server = function(input, output) { }
  
shinyApp(ui = ui, server = server)

How to make bs4Dash Box within Box appear inline and with equal widths

1 Answers1