Shiny selectize-dropdown menu open in upward direction - html

Question

In my shiny dashboard I have a couple of dropdown menus of type selectizeInput. They are located at the bottom of the page, so instead of opening the dropdown menus downward I would like to open them upward.
I did find a solution for the shinyWidgets dropdown menu called pickerInput. The solution here was to add a css tag:
.dropdown-menu{bottom: 100%; top: auto;}
However, this tag isn't working for selectizeInput. Any idea which css I have to add to my script?
Edit (answer by maartenzam with example)
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

You can do somethink like
.selectize-dropdown {
top: -200px !important;
}

Answer 2

Thanks for this, very useful!
Leaving this here just in case someone is interested in changing the behaviour only for some selectizeInput's and leave the others default (just as I was):
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

You can process this in onDropdownOpen event.
$('select[multiple]').selectize({
onDropdownOpen: function($dropdown) {
$dropdown.css({
bottom: '100%',
top: ''
}).width(this.$control.outerWidth());
}
});
In my project I used data-dropdown-direction attribute to specify which element should dropdown in up direction.
In template:
<select multiple data-dropdown-direction="up"></select>
In script:
$('select[multiple]').selectize({
onDropdownOpen: function($dropdown) {
if (this.$input.data('dropdownDirection') === 'up') {
$dropdown.css({
bottom: '100%',
top: ''
}).width(this.$control.outerWidth());
}
}
});

Answer 4

It is possible to do this via Selectize options.
$('#selectize').selectize({
dropdownDirection: 'up',
plugins: [
'dropdown_direction'
],
});

Answer 5

Similar to #ismirsehregal, dropping a helpful variation on this using the new virtualSelectInput function from shinyWidgets:
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)