Question

我知道fluidPage()和fixedPage()的布局很有光泽。在我的情况下，最好对元素具有其他行为（图形/输入字段/ shinydashboard框）。

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

传奇：

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

示例：

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

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

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

使用闪亮/发光仪表板是否可以进行这样的布局？

Answer 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")
        )
      )
    )
  )
)

我用固定的高度构建自己的盒子，并为每个图/内容元素单独定义宽度。

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

1 个答案: