How to prevent plot from overspilling out of box in shiny box? - r

Question

I stumbled upon this wierd interaction between collapsed boxes within boxes and plots:
In the the first instance of this, in the minimal working example below, on the left side, expanding the box pushes the plot over the edge of the box, while in the second instance on the right side, it does not.
Also, uncommenting the code of the action button somehow remedies this somehow.
Can someone explain to me why this is happening and how to solve the issue?
I am aware that I could just use the layout to the right, but I would really like to understand this behavior.
Thanks in advance!
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidPage(
box(width = 12,
title = "Some Title",
collapsible = TRUE,
solidHeader = TRUE,
status = "danger",
box(widht = 12,
title = "Some Sub Title",
collapsible = TRUE,
solidHeader = TRUE,
box(
width = 12,
title = "Details 1",
collapsible = TRUE,
solidHeader = TRUE,
collapsed = TRUE,
status = "info",
tableOutput("Placeholder_Table_1")
),
#actionButton(inputId = "Action_1",
# label = "Does nothing"
#),
plotOutput("Placeholder_Plot_1")
),
box(widht = 12,
title = "Sub Title 2",
collapsible = TRUE,
solidHeader = TRUE,
plotOutput("Placeholder_Plot_2"),
box(
width = 12,
title = "Details 2",
collapsible = TRUE,
solidHeader = TRUE,
collapsed = TRUE,
status = "info",
tableOutput("Placeholder_Table_2")
)
)
)
)
)
)
server <- function(input, output) {
output$Placeholder_Table_1 <- renderTable(
tibble('Variable 1' = "X",
'Variable 2' = "Y",
'Variable 3' = "Z"
)
)
output$Placeholder_Table_2 <- renderTable(
tibble('Variable 1' = "X",
'Variable 2' = "Y",
'Variable 3' = "Z"
)
)
output$Placeholder_Plot_1 <- renderPlot(
ggplot(data = mtcars) +
labs(title = "Placeholder Plot 1")
)
output$Placeholder_Plot_2 <- renderPlot(
ggplot(data = mtcars) +
labs(title = "Placeholder Plot 2")
)
}
shinyApp(ui, server)

Answer 1

The problem is not the plot, it comes from the box.
First thing you need to know is box is actually using .col-xxx classes from bootstrap and these classes have a CSS float: left;. It will cause itself has 0 height of the parent div. Read this: CSS: Floating divs have 0 height.
However, what you see is it takes some spaces on the UI, so what you see the height is box + plot, but in the parent div height calculation, it's just the plot.
To fix, very easy, wrap your box with fluidrow, .row has a CSS display: table which solves the problem.
fluidRow(box(
width = 12,
title = "Details 1",
collapsible = TRUE,
solidHeader = TRUE,
collapsed = TRUE,
status = "info",
tableOutput("Placeholder_Table_1")
)),