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?