Please find the screenshot and reprex below
Let's keep the font as it is adoped but can we vary the drop-down box ? height and weight as indicated in the screenshot ?

How can we customize the height and width of the select Input ?

Capture

library(shiny)
shinyApp(
    ui = fluidPage(tags$style(type='text/css', ".selectize-input { font-size: 13px; line-height: 13px;} 
                 .selectize-dropdown { font-size: 13px; line-height: 13px; }
                 .form-group, .selectize-control {margin-bottom:-10px;max-height: 100px !important;}
                 .box-body {
          padding-bottom: 0px;
      }"),
        selectInput("state", "Choose a state:",
                    list(`East Coast` = list("NY", "NJ", "CT"),
                         `West Coast` = list("WA", "OR", "CA"),
                         `Midwest` = list("MN", "WI", "IA"))
        ),
        textOutput("result")
    ),
    server = function(input, output) {
        output$result <- renderText({
            paste("You chose", input$state)
        })
    }
)

Hi,

This is what I came up with:

library(shiny)

shinyApp(
  ui = fluidPage(
    
    tags$head(
      tags$style(HTML("

      .selectize-input {
        height: 50px;
        width: 600px;
        font-size: 24pt;
        padding-top: 5px;
      }

    "))
    ),
    
    selectInput("state", "Choose a state:",
                list(`East Coast` = list("NY", "NJ", "CT"),
                     `West Coast` = list("WA", "OR", "CA"),
                     `Midwest` = list("MN", "WI", "IA"))
    ),
    
    textOutput("result")
  ),
  server = function(input, output) {
    output$result <- renderText({
      paste("You chose", input$state)
    })
  }
)

An interesting related post is this one:

Good luck!
PJ

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.