闪亮的selectize下拉菜单向上展开

Question

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

我找到了一个解决方案，可以用于shinyWidgets下拉菜单，称为pickerInput。这里的解决方案是添加一个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)

- Wilmar van Ommeren

---

通过谷歌搜索，我发现 selectize.js 有一个名为 dropdownDirection 的选项。然而，options = list(dropdownDirection = "up") 并不起作用。也许在 shiny 中 selectize.js 不是最新的版本。 - Stéphane Laurent

Answer 1

您可以像这样做：

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

- maartenzam

---

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

Answer 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)

- ismirsehregal

Answer 3

类似于 @ismirsehregal，使用来自 shinyWidgets 的新 virtualSelectInput 函数，提供一个有用的变体：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # modify virtual select css https://github.com/sa-si-dev/virtual-select/blob/master/dist/virtual-select.min.css
  tags$head(tags$style(type = "text/css", paste0(".vscomp-dropbox {
                                                        position: absolute !important;
                                                        bottom: 100% !important;
                                                        top: auto !important;
                                                     }}"))),
  div(style='height:200px'),
  virtualSelectInput('id', 'test', 1:10, selected = NULL, multiple = TRUE,
                     options = NULL)
)

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

shinyApp(ui, server)

- Natalie O'Shea

Answer 4

你可以在 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());
    }
  }
});

- verybadbug

Answer 5

可以通过Selectize选项来实现这一点。

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

- Nebster