时间戳

首页 > 解决方案 > 闪亮的动态布局：自动将固定宽度的元素换行到下一行

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

问题描述

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

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

传奇：

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

例子：

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

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

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

使用闪亮/闪亮的仪表板可以实现这样的布局吗？

标签： rlayoutshinyshinydashboard

解决方案

感谢@SimonLarsen，我能够找到解决方案。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")
        )
      )
    )
  )
)

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

推荐阅读