Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the height of select dropdown in shiny?

I want to change the height of the select dropdown in shiny app. The default height displays about 8 options, I would like to see more. It is possible to increase the number of options by decreasing the line height of dropdown, but that is not an optimal solution for me. I searched a lot about how to do it, looked into selectize.js code and my current hypothesis is that either this is trivial, or impossible by design.

What I've learned is that the displayed dropdown from select is a div of class .selectize-dropdown-content, but changing its height and width attributes does not change anything. It is possible to change the background color though. Here is my single file shiny app code:

server <- function(input, output) {
    output$distPlot <- renderPlot({
        plot(0.5,0.5,xlim=c(0,1),ylim=c(0,1))
        text(0.5,0.5,input$Letter)
  })
}

ui <- shinyUI(fluidPage(
  sidebarLayout(
    sidebarPanel(
        selectizeInput("Letter", "", setNames(letters,letters),selected="a",multiple=FALSE),       
        tags$style(type='text/css',
                   ".selectize-dropdown-content {
height: 600 px;
width: 700 px;
background-color: #b0c4de;
}")
    ),
    mainPanel(plotOutput("distPlot"))
  )
))

shinyApp(ui = ui, server = server)

So my question is, whether I am modifying the css of the correct element, or is changing of dropdown height is not possible in selectize.js?

like image 885
mpiktas Avatar asked Dec 11 '14 09:12

mpiktas


1 Answers

Got the solution, few minutes after posting the question. The height of select dropdown is controlled by max-height attribute. The following css does the trick:

tags$style(type='text/css', ".selectize-dropdown-content {max-height: 400px; }"), 
like image 185
mpiktas Avatar answered Nov 13 '22 07:11

mpiktas