Shiny R Selectize Input widget size target the input

Question

I have multiple selectizeInput in my Shiny app. Most of them are not supposed to be full of variables/elements, but one of them yes. The problem is the more variables/elements in the box, the larger is this one and the display is not good at all. I have found solutions to manipulate the height, font, width, etc. of a input widget:

    library(shiny)

    ui <- fluidPage(
      fluidRow(

        selectInput("speed", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1),
        tags$head(tags$style(HTML(".selectize-input {height: 100px; width: 500px; font-size: 100px;}")))
      )

)
server <- function(input, output){}
shinyApp(ui, server)

This works. But this solution affects to all the selectizeInput I have in my app, I'm interested in just target one selectizeInput. Is there a way to do that?

Answer 1

You can use some advanced CSS to select the .selectize-input box. So in selectInput structure, the element with the actual id is assigned to a select tag and the box you want is the first child of the following tag after the select tag. We can use + to select the following tag and use > to select the first child containing the .selectize-input class of the following tag.

library(shiny)

ui <- fluidPage(
    tags$head(tags$style(HTML("#speed + div > .selectize-input {height: 100px; width: 500px; font-size: 100px;}"))),
    fluidRow(
        selectInput("speed", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1),
        selectInput("speed2", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1)
    )
)
server <- function(input, output){}
shinyApp(ui, server)

#ID + div > .selectize-input is what you want to apply.

Try to run my example, I created two selectInput and only the first one will have the CSS style.