如何防止情节在闪亮的盒子里溢出？

Question

我偶然发现了框内折叠框和绘图之间的这种奇怪的交互：在第一个实例中，在下面的最小工作示例中，在左侧，扩展框会将绘图推到框的边缘，而在右侧的第二个实例中，它不会。此外，取消注释操作按钮的代码以某种方式解决了这个问题。有人可以向我解释为什么会这样以及如何解决这个问题吗？我知道我可以只使用右侧的布局，但我真的很想了解这种行为。

提前致谢！

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

问题不在剧情，出在box.

首先你需要知道的是 box 实际上是在使用 bootstrap 中的 .col-xxx 类而这些类有一个 CSS float: left;。它会导致自身的父级高度为 0 div。读这个：CSS: Floating divs have 0 height.

但是，你看到的是在UI上占用了一些空间，所以你看到的高度是box+plot，但是在parent div高度计算中，它只是plot .

要修复，非常简单，用 fluidrow 包裹你的盒子，.row 有一个 CSS display: table 可以解决问题。

fluidRow(box(
    width = 12,
    title = "Details 1",
    collapsible = TRUE,
    solidHeader = TRUE,
    collapsed = TRUE,
    status = "info",
    tableOutput("Placeholder_Table_1")
)),

如何防止情节在闪亮的盒子里溢出？

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

r

shiny

shinydashboard