I have several boxes which are located in a fluid-row, When these boxes contain similar amounts of information there is no issue with the height alignment, and the dynamic adjustment of this height with a smaller browser window works fine.
The issue comes when the boxes do not contain the same amount of information (e.g. two tables next to each other with differing numbers of rows); this causes the heights to not line up neatly.
# NOT RUN {
## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)
# A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
body <- dashboardBody(
# infoBoxes
# Boxes
fluidRow(
box(status = "primary",
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
selectInput("progress", "Progress",
choices = c("0%" = 0, "20%" = 20, "40%" = 40, "60%" = 60, "80%" = 80,
"100%" = 100)
)
),
box(title = "Histogram box title",
status = "warning", solidHeader = TRUE, collapsible = TRUE,
plotOutput("plot", height = 250)
)
)
)
server <- function(input, output) {
output$plot <- renderPlot({
hist(rnorm(input$orders))
})
}
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
body
),
server = server
)
}
# }
I know I can manually set the height of the boxes, but the issue comes when I do not know the amount of information needed to be presented in each box. I do not want to make the box too short (and potentially cut out information), nor do I want to make the box too tall (and use too much screen space). However I do want the boxes to be the same height.
Therefore, is it possible to extract the dynamically generated max height of each box and use that height to force both boxes to that height?
This would be important to me when the boxes contain differing amount of information, and when the screen is resized and [for example] the text of one box jumps to two lines but the other box does not (causing mis-matched height).