闪亮的动态布局:自动将固定宽度的元素换行到下一行
Shiny dynamic layout: Automatically wrap fixed width elements to the next row
我知道闪亮的 fluidPage()
和 fixedPage()
布局。在我的例子中,虽然元素有另一种行为会很好(plots/input fields/shinydashboard 框)。
元素应具有固定的宽度(和高度),并在显示宽度发生变化时自动移动到下一行。
图例:
[...] <- Element
| <- Right browser window border
示例:
1. Big screen case
[...] [..] [.....] [...] [...] |
2. Small screen case
[...] [..] [.....] [...] |
[...] |
3. Even smaller screen case
[...] [..] |
[.....] |
[...] [...] |
shiny/shinydashboard 可以实现这样的布局吗?
感谢@SimonLarsen,我找到了解决方案。 Shiny 提供 flowLayout()
支持这种布局。不幸的是,shinydashboard 框不能在此框架内使用,因为它们需要 bootstrap 网格框架内的宽度值。您将不得不更改 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")
)
)
)
)
)
我构建了自己的固定高度的盒子,并为每个 plot/content 元素单独定义了宽度。
我知道闪亮的 fluidPage()
和 fixedPage()
布局。在我的例子中,虽然元素有另一种行为会很好(plots/input fields/shinydashboard 框)。
元素应具有固定的宽度(和高度),并在显示宽度发生变化时自动移动到下一行。
图例:
[...] <- Element
| <- Right browser window border
示例:
1. Big screen case
[...] [..] [.....] [...] [...] |
2. Small screen case
[...] [..] [.....] [...] |
[...] |
3. Even smaller screen case
[...] [..] |
[.....] |
[...] [...] |
shiny/shinydashboard 可以实现这样的布局吗?
感谢@SimonLarsen,我找到了解决方案。 Shiny 提供 flowLayout()
支持这种布局。不幸的是,shinydashboard 框不能在此框架内使用,因为它们需要 bootstrap 网格框架内的宽度值。您将不得不更改 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")
)
)
)
)
)
我构建了自己的固定高度的盒子,并为每个 plot/content 元素单独定义了宽度。