使用bslib避免Shiny应用出现双重滚动条

当Shiny应用的sidebar中包含多个带有大量选项的pickerInput时，会出现双重滚动条问题——sidebar自身的滚动条和picker下拉框内部的滚动条同时存在。可以通过自定义CSS来解决这个问题，以下是具体方案：

问题复现代码 #

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- page_fillable(
  layout_sidebar(
    sidebar = sidebar(
      pickerInput("a", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("b", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("c", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("d", label = "Select", choices = c(LETTERS, LETTERS))
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

解决方案 #

通过自定义CSS禁用picker下拉框内部的滚动条，只保留sidebar的滚动条。在UI中添加tags$style模块，修改picker下拉框的内部滚动样式：

修改后的完整代码 #

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- page_fillable(
  tags$style(
    # 禁用picker下拉框内部的滚动条
    ".dropdown-menu.inner {
      max-height: none !important;
      overflow-y: visible !important;
    }"
  ),
  layout_sidebar(
    sidebar = sidebar(
      pickerInput("a", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("b", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("c", label = "Select", choices = c(LETTERS, LETTERS)),
      pickerInput("d", label = "Select", choices = c(LETTERS, LETTERS))
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

原理说明 #

• .dropdown-menu.inner是pickerInput下拉框内部滚动区域的CSS类，通过设置max-height: none和overflow-y: visible，让下拉框内容自适应高度，不再显示内部滚动条。
• 此时所有内容会纳入sidebar的滚动范围，只保留sidebar的单个滚动条，解决双重滚动条的问题。

内容的提问来源于stack exchange，提问作者MLEN