Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shiny selectize-dropdown menu open in upward direction

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)
like image 345
Wilmar van Ommeren Avatar asked Sep 11 '18 07:09

Wilmar van Ommeren


1 Answers

You can do somethink like

.selectize-dropdown {
  top: -200px !important;
}
like image 169
maartenzam Avatar answered Sep 27 '22 15:09

maartenzam