R闪亮的滚动侧边栏/溢出

Question

我正在构建一个通常适合小屏幕的闪亮应用。但是，该应用程序在侧边栏菜单中有许多选择器和过滤器。太多以至于侧边栏比主面板长，并且不能完全适应屏幕。我想让侧边栏可滚动，以便在单个视图中可以看到所有内容。我觉得让侧边栏加长页面看起来很不专业。

这是一个可重现的示例（附图片）。当然，我的侧边栏有不同的选择器，而不是像示例中那样反复重复的选择器，但下面的代码说明了这一点。我将如何使侧栏滚动？我还没有在网上找到好的解决方案。提前致谢。

 ## app.R ##
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
  ),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Answer 1

您可以在tags$style 中设置 CSS 样式。我们需要用id = #sidebarItemExpanded修改元素。

设置overflow: auto; 和max-height: 100vh;，或者类似的东西：

dashboardSidebar(
    tags$style(
      "#sidebarItemExpanded {
            overflow: auto;
            max-height: 100vh;
        }"
    ),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
)

您可以阅读有关overflow 属性here 的更多信息。

Answer 2

再次感谢heds1 之前的回答。我注意到提供的答案确实在应用程序的右侧创建了一个我不打算出现的滚动条。然后我修改了 heds1 给出的答案，但做了一个小调整，以说明闪亮的 50 像素标题。由于标题，滚动条的高度应该是最大高度减去 50px。下面的代码就是这样做的。

  dashboardSidebar(
    tags$style(
      "#sidebarItemExpanded {
            overflow: auto;
            height: calc(100vh - 50px) !important;
        }"
    ),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50),
    sliderInput("slider", "Number of observations:", 1, 100, 50)
  ),