将“vertical_layout:scroll”与“flexdashboard”和“runtime:shiny”一起使用时带有滚动条的部分图

Question

我试图用

flexdashboard

来呈现

runtime: shiny

内部的基本情节。这与

flexdashboard

默认值

vertical_layout: fill

配合得很好，但不适用于

vertical_layout: scroll

，其中绘图部分隐藏，我无法弄清楚如何使容器框（而不是绘图）更高以显示完整的内容阴谋。如果绘图不使用整个屏幕空间，为什么要添加滚动条？代表：

---
title: "Minimal Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: scroll
runtime: shiny
---

## Row 1 {data-height=800}

```{r}
ui <- fluidPage(
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)
```

相关 GitHub 问题：https://github.com/rstudio/flexdashboard/issues/452

Answer 1

我希望能给你一个内置的方法来解决这个问题，但我只能想出一个解决方法。

这为 Shiny

iframe

添加了 CSS 控件。

有 2 种布局在幕后发生（我假设这些布局来自 Flexdashboard）

• “桌面布局”——显然是根据屏幕尺寸分配的
  • 在此模式下，Flexdashboard 的容器似乎正在执行您所期望的垂直填充
  • Shiny 的 iframe 没有填充给定的空间 - 忽略其父容器
• '移动布局'类
  • Flexdashboard的回应：垂直填充？我不在乎你想要什么，你得到的是垂直滚动。
  • Shiny 的回应：我仍然不关心我的父容器在做什么。我会成为任何我想要的尺寸。 （你不拥有我 Flexdashboard。）

这应该可以解决你的问题：

---
title: "Minimal Flexdashboard Example"
output:
  flexdashboard::flex_dashboard:
    orientation: rows   
    vertical_layout: fill
runtime: shiny
---

<!-- 
for non-mobile sized screens only; 
  where whether it's a 'mobile' screen size is random...apparently...
  I mean they values assigned..but it's largely ignored..
-->
<style>
div.desktop-layout * iframe.shiny-frame {
  height: 100%;
  width: 100%;
}
div.mobile-layout * iframe.shiny-frame {
  height: 500px;
}
</style>

## Row 1 {data-height=800}

```{r shinier}
ui <- fluidPage(
  plotOutput("plot", height = "500px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5))
}
shinyApp(ui, server)
```

Taaa daaaa!

在桌面布局中：

在移动布局中：