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?
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; }"),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With