如何防止情节在闪亮的盒子中溢出？答案

【问题标题】：How to prevent plot from overspilling out of box in shiny box?如何防止情节在闪亮的盒子中溢出？
【发布时间】：2021-04-17 02:49:23
【问题描述】：

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

提前致谢！

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)

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

问题不在于剧情，来自box。

您需要知道的第一件事是box 实际上是使用引导程序中的.col-xxx 类，这些类有一个 CSS float: left;。它将导致自身具有父 div 的 0 高度。阅读：CSS: Floating divs have 0 height。

但是，你看到的是它在 UI 上占用了一些空间，所以你看到的高度是 box + plot，但在父 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")
)),

【讨论】：

感谢您如此清楚地解释这一点，就像一个魅力！