闪亮的选择下拉菜单向上打开答案

【问题标题】：Shiny selectize-dropdown menu open in upward direction闪亮的选择下拉菜单向上打开
【发布时间】：2021-04-06 19:16:25
【问题描述】：

在我闪亮的仪表板中，我有几个selectizeInput 类型的下拉菜单。它们位于页面底部，因此我不想向下打开下拉菜单，而是想向上打开它们。

我确实为名为@987654323@ 的shinyWidgets 下拉菜单找到了solution。这里的解决方案是添加一个css 标签：

.dropdown-menu{bottom: 100%; top: auto;}

但是，此标记不适用于 selectizeInput。知道我必须将哪个css 添加到我的脚本中吗？

编辑（maartenzam 举例回答）

library(shiny)

ui <- fluidPage(
  # selectize style
  tags$head(tags$style(type = "text/css", paste0(".selectize-dropdown {
                                                     bottom: 100% !important;
                                                     top:auto!important;
                                                 }}"))),
  div(style='height:200px'),
  selectizeInput('id', 'test', 1:10, selected = NULL, multiple = FALSE,
                 options = NULL)
)

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

}

shinyApp(ui, server)

【问题讨论】：

通过谷歌搜索，我发现selectize.js 中有一个选项dropdownDirection。但是options = list(dropdownDirection = "up") 不起作用。也许selectize.js 在闪亮中不是最新的。

标签： html css r twitter-bootstrap-3 shiny

【解决方案1】：

你可以做一些像这样的想法

.selectize-dropdown {
  top: -200px !important;
}

【讨论】：

这确实是我要找的标签！我在我的问题中为未来的读者添加了一个最小的可重复示例。与其使用top: -200px，不如使用bottom: 100% !important; top:auto!important;。感谢您为我指明正确的方向！

【解决方案2】：

谢谢你，非常有用！

将其留在这里以防万一有人有兴趣仅更改某些 selectizeInput 的行为并保留其他默认设置（就像我一样）：

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('#upwardId+ div>.selectize-dropdown{bottom: 100% !important; top:auto!important;}'))),
  selectizeInput(inputId = 'downwardId', label='open downward', choices = 1:10, selected = NULL, multiple = FALSE),
  div(HTML("<br><br><br><br><br>")),
  selectizeInput(inputId = 'upwardId', label='open upward', choices = 1:10, selected = NULL, multiple = FALSE)
)

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

shinyApp(ui, server)

【讨论】：

【解决方案3】：

你可以在onDropdownOpen事件中处理这个。

$('select[multiple]').selectize({
  onDropdownOpen: function($dropdown) {
    $dropdown.css({
      bottom: '100%',
      top: ''
    }).width(this.$control.outerWidth());
  }
});

在我的项目中，我使用了data-dropdown-direction 属性来指定应该向上下拉的元素。

在模板中：

<select multiple data-dropdown-direction="up"></select>

在脚本中：

$('select[multiple]').selectize({
  onDropdownOpen: function($dropdown) {
    if (this.$input.data('dropdownDirection') === 'up') {
      $dropdown.css({
        bottom: '100%',
        top: ''
      }).width(this.$control.outerWidth());
    }
  }
});

【讨论】：

【解决方案4】：

可以通过选择选项来做到这一点。

$('#selectize').selectize({
    dropdownDirection: 'up',
    plugins: [
        'dropdown_direction'
    ],                
});

【讨论】：