时间戳

首页 > 解决方案 > Shiny 中动态调整大小的侧边栏面板和主面板

r - Shiny 中动态调整大小的侧边栏面板和主面板

问题描述

我正在尝试创建一个 Shiny 应用程序，该应用程序在 sidebarPanel 中动态生成 UI 输入选项，该选项在 mainPanel 中生成图。在实际代码中，sidebarPanel 和 mainPanel 比大多数显示器允许的要长得多。因此，我希望它们在顶部显示 titlePanel 时独立滚动。

下面是一个最小的可重现示例。我手动将最大高度定义为 925 像素。这适用于 1080p 的浏览器，但在 1440p 显示器上它看起来有点傻，因为 max-height 参数使侧边栏仍然滚动到 925px。如果我设置 max-height: 100%，溢出根本不起作用，只有主页滚动。如何获得独立滚动的 sidebarPanel 和 mainPanel 动态调整到浏览器窗口的大小？

ui = fluidPage (
    titlePanel("Test Server"),
    sidebarLayout(position = "right",
        sidebarPanel(
            width = 2,
            style = paste0("overflow-y: scroll;
                            max-height: 925px;"),
            tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
            tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
        ),
        mainPanel(
            width = 10,
            style = paste0("overflow-y: scroll;
                            max-height: 925px;"),
            tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
            tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
        )
    )
)
server = function(input, output) { 
}
shinyApp(ui = ui, server = server)

标签： rshiny

解决方案

从这里采取的想法您的代码可以调整以实现两个面板的独立滚动！

最好的问候，莉亚

ui = fluidPage (
  titlePanel("Test Server"),
  sidebarLayout(position = "right",
                sidebarPanel(
                  width = 2,
                  style = paste0("height: 90vh; overflow-y: auto;"), ##CHANGE
                  tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
                  tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
                ),
                mainPanel(
                  width = 10,
                  style = paste0("height: 90vh; overflow-y: auto;"),##CHANGE
                  tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
                  tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
                )
  )
)
server = function(input, output) { }
shinyApp(ui = ui, server = server)

推荐阅读