如何为Shiny框架的selectInput组件添加横向滚动条

解决方案 #

你设置width参数无效的原因是selectize=FALSE模式下的原生select组件的选项默认会折行显示，需要额外添加CSS样式控制内容溢出行为和选项的换行规则，操作如下：

1. 在你的ui.R文件的tabPanel内添加自定义CSS样式，完整修改后的ui.R对应部分如下：

tabPanel("IPL Match",
  # 新增自定义CSS样式
  tags$head(
    tags$style(HTML("
      /* 针对id为match的selectInput添加横向滚动 */
      #match {
        overflow-x: auto;
        width: 100%;
      }
      /* 设置选项不自动折行 */
      #match option {
        white-space: nowrap;
      }
    "))
  ),
  h4('Analyze an IPL match'),
  sidebarPanel(
    selectInput('matchFunc', 'Select match function', matchFuncs),
    selectInput('match', 'Select IPL match ', IPLMatches,selectize=FALSE, size=12),
    uiOutput("selectTeam"),
    radioButtons("plotOrTable", label = h4("Plot(static,interactive) or table"),
                 choices = c("Plot(interactive)" = 2, "Plot(static)" = 1, "Table" = 3),
                 selected = 2,inline=T)
  ),
  mainPanel(
    uiOutput("plotOrPrintIPLMatch"),
    column(7, offset=4,
           tags$h5((tags$i("Designed and developed by Tinniam V Ganesh"))),
           tags$h5((tags$i("May 25, 2021"))),
           tags$h6("Data source Cricsheet: http://cricsheet.org/"),
           tags$a(href="https://cran.r-project.org/web/packages/yorkr/index.html", " Based on R package yorkr")
    )
  )
)

2. 如果你需要给页面所有selectize=FALSE的selectInput都添加横向滚动效果，可以把CSS里的#match替换为select.form-control即可全局生效。
3. 你也可以根据需求调整selectInput的width参数，比如设置width = "400px"来控制选择框的整体宽度，配合上述CSS即可生效。

内容的提问来源于stack exchange，提问作者Tinniam V. Ganesh