css 闪亮的选择-下拉菜单向上打开

ryhaxcpt 于 2023-01-14 发布在其他

关注(0)|答案(5)|浏览(94)

在我闪亮的 Jmeter 板中，我有两个selectizeInput类型的下拉菜单，它们位于页面底部，所以我不想向下打开下拉菜单，而是想向上打开它们。
我确实为shinyWidgets下拉菜单pickerInput找到了一个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)

css

来源：https://stackoverflow.com/questions/52270897/shiny-selectize-dropdown-menu-open-in-upward-direction

5条答案

按热度按时间

5hcedyr01#

你可以做一些事情比如

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

赞(0）回复(0）举报 2023-01-14

thtygnil2#

谢谢这个，非常有用！
将其保留在这里，以防有人只对某些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)

赞(0）回复(0）举报 2023-01-14

bq9c1y663#

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

赞(0）回复(0）举报 2023-01-14

rhfm7lfc4#

可以通过“选择”选项执行此操作。

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

赞(0）回复(0）举报 2023-01-14

fbcarpbf5#

与@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)

赞(0）回复(0）举报 2023-01-14

我来回答

css 闪亮的选择-下拉菜单向上打开

5条答案

相关问题

热门标签

最新问答