为shinyjs dropdownbutton添加垂直滚动条——Shiny技术求助

嗨，我来帮你搞定这个需求！要让dropdownButton里的radioButtons选项出现垂直滚动条，只需要给下拉菜单的内容区域添加自定义CSS样式，限制最大高度并启用垂直滚动功能就可以了。

修改后的完整代码 #

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(skin = "black",
                    dashboardHeader(title = "test"),
                    dashboardSidebar(),
                    dashboardBody(
                      fluidRow(
                        column(width = 1),
                        dropdownButton(
                          tags$h3("List of Input"),
                          # 关键：用带样式的div包裹radioButtons，实现滚动
                          div(
                            radioButtons("attr_var","", c("1","2","3","4","5","6","7","8","9","10","11","12")),
                            style = "max-height: 200px; overflow-y: auto; padding: 10px;"
                          ),
                          circle = TRUE,
                          status = "danger",
                          icon = icon("gear"),
                          width = "100px",
                          tooltip = tooltipOptions(title = "Click to see inputs")
                        )
                      )
                    )
) 

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

shinyApp(ui, server)

关键说明 #

• 我们用div()把radioButtons包裹起来，通过style参数设置三个核心样式：
  • max-height: 200px：限制下拉内容的最大高度，你可以根据需要调整这个数值（比如改成300px）
  • overflow-y: auto：当内容高度超过max-height时，自动显示垂直滚动条；内容不足时不会出现滚动条
  • padding: 10px：给内容和容器边缘添加间距，让界面更美观

这样修改后，当你的radioButtons选项数量较多时，下拉菜单就会出现垂直滚动条，不会因为内容过长导致界面变形啦。

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