R 下拉复选框输入到

是否可以在Shining中有一个下拉列表，您可以在其中选择多个值？我知道

selectInput

有设置

multiple=T

的选项，但我不喜欢所有选择的选项都在屏幕上可见，特别是因为我有40多个。

checkboxGroupInput（）

也是如此，我更喜欢它，但仍然会显示所有选定的值。难道不可能得到一个类似我从下面的Excel复制的下拉列表，而不是Shinys

selectInput

和

checkboxGroupInput（）

的示例吗

---

编辑：此功能（和其他功能）在软件包中提供

---

嗨，我写过一次这个

下拉按钮

函数，它创建了一个引导下拉按钮（doc），结果如下：

代码如下：

# func --------------------------------------------------------------------

dropdownButton <- function(label = "", status = c("default", "primary", "success", "info", "warning", "danger"), ..., width = NULL) {

  status <- match.arg(status)
  # dropdown button content
  html_ul <- list(
    class = "dropdown-menu",
    style = if (!is.null(width)) 
      paste0("width: ", validateCssUnit(width), ";"),
    lapply(X = list(...), FUN = tags$li, style = "margin-left: 10px; margin-right: 10px;")
  )
  # dropdown button apparence
  html_button <- list(
    class = paste0("btn btn-", status," dropdown-toggle"),
    type = "button", 
    `data-toggle` = "dropdown"
  )
  html_button <- c(html_button, list(label))
  html_button <- c(html_button, list(tags$span(class = "caret")))
  # final result
  tags$div(
    class = "dropdown",
    do.call(tags$button, html_button),
    do.call(tags$ul, html_ul),
    tags$script(
      "$('.dropdown-menu').click(function(e) {
      e.stopPropagation();
});")
  )
  }

---

首先，非常感谢这个下拉按钮功能。它非常有用

其次，我尝试将其用于闪亮的仪表板侧边栏菜单，但默认字符的样式是“颜色：白色”（因为背景较暗）。这花了我几个小时的时间来理解可以在函数内部更改的内容，更确切地说是在html_ul的内容中。以下是感兴趣的线条，颜色为：黑色：

很简单。。。但是当你不知道的时候（R是我唯一知道的语言）。。。所以，我希望这将有助于任何其他css无知（和/或HTML？）像我一样

---

干杯

关于如何在下拉菜单上创建一个滚动条，在与下拉按钮相关的评论中有几个问题（非常适合我，谢谢）。对不起，我没有声誉直接回复评论

尝试调整styles.css中的相关ID，无论您在dropdownButton中放置了什么对象。因此，对于示例，checkboxGroupInput ID需要具有：

#check1
{
   height: 200px;
   overflow: auto;
}

编辑：

要在ui.R中调用styles.css：

navbarPage("Superzip", id="nav",

  tabPanel("Interactive map",
    div(class="outer",

      tags$head(
        # Include our custom CSS
        includeCSS("styles.css")
      ),

      leafletOutput("map", width="100%", height="100%"), 
      ...

以及styles.css，其中inputID

ttype

和

chain

自动溢出：

input[type="number"] {


max-width: 80%;
}

div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}

/* Customize fonts */
body, label, input, button, select { 
  font-family: 'Helvetica Neue', Helvetica;
  font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }

#controls {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.65;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}
#controls:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

#data_inputs {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.65;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}
#data_inputs:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

/* Position and style citation */
#cite {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
}

#cite {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
}

#ttype
{
   height: 200px;
   overflow: auto;
}

#chain
{
   height: 200px;
   overflow: auto;
}



."form-group shiny-input-checkboxgroup shiny-input-container"
{
   height: 50px;
   overflow: auto;
}

/* If not using map tiles, show a white background */
.leaflet-container {
  background-color: white !important;
}

---

对于未来可能需要类似解决方案的访问者，一个好的选择可能是

优点：

您可以设置列表长度

是一个下拉函数

用户可以通过搜索列表选择一个或多个选项 或者在框中键入

有关更多信息，请查看上述链接。希望这会有所帮助

干杯

---

看起来您必须创建自己的自定义闪亮小部件：）鉴于我缺乏知识或CSS/HTML，希望有其他解决方案……似乎宽度参数不起作用。如果我将40改为80，则什么也不会改变。解决方案：只需将style=（“width:120px；”）添加到html按钮外观中。width args可以工作，请尝试

width=“100%”或“width=400”，只是40或80太小，您不能将宽度设置为低于子元素的宽度谢谢，您是对的。（取消）全选选项也是一个不错的功能，但我在互联网上看到这需要CSS。也可以使用
操作按钮
，编辑我的答案，重新运行代码并查看第二个下拉按钮。我仍然对滚动条功能非常感兴趣。但我不完全明白你的答案，你是说这个简单的解决方案包括一个滚动条@蒂姆·乌得勒支为我做到了。我不是HTML和CSS方面的专家，但似乎您可以告诉它，当元素大于所选高度时，自动使用滚动条<代码>下拉按钮（label=“Chains”，status=“default”，actionButton（inputId=“all_Chains”，label=“（Un）select all”），checkboxGroupInput（inputId=“chain”，label=“，choices=Chains，selected=Chains））

，样式为：

#chain{height:200px；overflow:auto；}

me nother…你在哪里加载styles.css？你可以添加完整的styles.css文件以及你在答案中调用它的位置吗？@Tim_Utrecht见上文，基本上是对

#check1
{
   height: 200px;
   overflow: auto;
}

navbarPage("Superzip", id="nav",

  tabPanel("Interactive map",
    div(class="outer",

      tags$head(
        # Include our custom CSS
        includeCSS("styles.css")
      ),

      leafletOutput("map", width="100%", height="100%"), 
      ...

input[type="number"] {


max-width: 80%;
}

div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}

/* Customize fonts */
body, label, input, button, select { 
  font-family: 'Helvetica Neue', Helvetica;
  font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }

#controls {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.65;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}
#controls:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

#data_inputs {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.65;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}
#data_inputs:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

/* Position and style citation */
#cite {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
}

#cite {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
}

#ttype
{
   height: 200px;
   overflow: auto;
}

#chain
{
   height: 200px;
   overflow: auto;
}



."form-group shiny-input-checkboxgroup shiny-input-container"
{
   height: 50px;
   overflow: auto;
}

/* If not using map tiles, show a white background */
.leaflet-container {
  background-color: white !important;
}