闪亮的动态布局：自动将固定宽度的元素换行到下一行答案

【问题标题】：Shiny dynamic layout: Automatically wrap fixed width elements to the next row闪亮的动态布局：自动将固定宽度的元素换行到下一行
【发布时间】：2019-04-29 12:52:56
【问题描述】：

我知道 fluidPage() 和 fixedPage() 的闪亮布局。在我的情况下，虽然对元素（绘图/输入字段/闪亮的仪表板框）有另一种行为会很好。

元素应该有一个固定的宽度（和高度），如果显示宽度发生变化，它会自动移动到下一行。

传说：

[...] <- Element
| <- Right browser window border

例子：

1. Big screen case
[...] [..] [.....] [...] [...]        |

2. Small screen case
[...] [..] [.....] [...] |
[...]                    |

3. Even smaller screen case
[...] [..]  |
[.....]     |
[...] [...] |

shiny/shinydashboard 可以实现这样的布局吗？

【问题讨论】：

我认为flowLayout 可能是您正在寻找的。 shiny.rstudio.com/reference/shiny/1.2.0/flowLayout.html.
这似乎是我正在寻找的。谢谢！如果您发布答案，我会接受。作为一个附加问题：您知道我是否以及如何在此布局中使用闪亮仪表板框？它们需要引导系统中的宽度值，这似乎与 flowLayout() 不兼容。

标签： r layout shiny shinydashboard

【解决方案1】：

感谢@SimonLarsen，我能够找到解决方案。 Shiny 提供了支持这种布局的flowLayout()。不幸的是，shinydashboard 框不能在这个框架中使用，因为它们期望在引导网格框架中的宽度值。您必须更改 shinydashbaord::box() 的实现以使用像素宽度值，这将导致各种其他问题。

我选择了以下解决方案：

shiny::fluidRow(
  shinydashboard::box(
    width = 12,
    shiny::div(
      style = "overflow-x: scroll",
      shiny::flowLayout(
        cellArgs = list(
          style = "
          min-width: 300px; 
          width: auto; 
          height: auto; 
          border: 1px solid darkgray; 
          padding: 10px;
          margin: 10px;
        "),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "1045px",
          ns("plot2")
        )
      )
    )
  )
)

我构建了我自己的具有固定高度的框，并为每个绘图/内容元素单独定义了宽度。

【讨论】：