Question

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

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

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

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

编辑（通过示例给出答案）

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)

Answer 1

您可以做类似的事情

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

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)

Answer 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());
    }
  }
});

Answer 4

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

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

向上的闪亮选择下拉菜单

4 个答案: