Shiny selectize-dropdown menu open in upward direction

user_5359882 0
Viewed 2132

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)
twitter-bootstrap-3 shiny r css html
4 Answers

You can do somethink like

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

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

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

It is possible to do this via Selectize options.

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