CODEWITHSUNDEEP
javascripthtmlcssrshiny
Mr369
Mr369

Reputation: 394

Shiny customize selectInput/selectizeInput

I want my Shiny select input to:

  1. Has no label
  2. Has customized background colour: #2f2d57
  3. Has placeholder
  4. Enable users to type-in and select

However, I can't make the app follow the above 4 rules together. My codes are below:

Data:

table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))

Attempt 1

Problem: Users are unable to type-in and select from the selectInput 

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style("#three_code_zip_selector {color: #ffffff; background-color: #2f2d57;}"),
      selectInput('three_code_zip_selector', NULL, choices = c("Please Select Desired Number" = "", table$col1), selectize = F)
    )
  })
}

shinyApp(ui = ui, server = server)

Attempt 2

Problem: By deleting selectize = F, users can type-in to select, but the background colour is not changed. 

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style("#three_code_zip_selector {color: #ffffff; background-color: #2f2d57;}"),
      selectInput('three_code_zip_selector', NULL, choices = c("Please Select Desired Number" = "", table$col1))
    )
  })
}

shinyApp(ui = ui, server = server)

I was also trying selectizeInput, but seems like it still has the same problem as above.

Attempt 3

Problem: Users can to type in, but the background colour is not changed, and there's a label at the top of selectizeInput which I don't want. 

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style(".selectize-dropdown-content .active {background: #2f2d57; !important;color: #ffffff; !important;}"),
  selectizeInput('three_code_zip_selector', "s", choices = c("Please Select Desired Number" = "", table$col1))
    )
  })
}

shinyApp(ui = ui, server = server)

Does anyone have ideas on how could I be able to satisfy all the 4 rules? Thanks in advance!

Upvotes: 3

Views: 3876

Answers (2)

ismirsehregal
ismirsehregal

Reputation: 33407

Here is a pure shiny solution:

library(shiny)

table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))

ui <- fluidPage(
  tags$head(tags$style(HTML('
                            #three_code_zip_selector+ div>.selectize-dropdown{background: #2f2d57; color: #ffffff;}
                            #three_code_zip_selector+ div>.selectize-input{background: #2f2d57; color: #ffffff;}
                            '))),
  selectizeInput(inputId = 'three_code_zip_selector', label = NULL, choices = table$col1, selected = NULL, multiple = TRUE, options = list('plugins' = list('remove_button'), placeholder = "Please Select Desired Number", 'create' = TRUE, 'persist' = TRUE)))


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

Upvotes: 6

Travis Hinkelman
Travis Hinkelman

Reputation: 164

Here is an example using the shinyWidgets package:

library(shinyWidgets)

ui <- fluidPage(
  uiOutput("container")
)

server <- function(input, output) {
  table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))
  output$container <- renderUI({
    fluidRow(
      pickerInput(
        inputId = "three_code_zip_selector",
        label = NULL, 
        choices = table$col1,
        options = list(
          title = "Please Select Desired Number",
          `live-search` = TRUE,
          style = c("background: #2f2d57; color: #ffffff;"))
      )
    )
  })
}

shinyApp(ui = ui, server = server)

EDIT: In the code above, I used the same code structure provided in the question, but, for this simple example, there is no reason to have code for the UI elements on the server side. Here is an alternative example:

library(shinyWidgets)

ui <- fluidPage(
  fluidRow(
    pickerInput(
      inputId = "three_code_zip_selector",
      label = NULL, 
      choices = c(3, 4, 8, 5, 2, 6, 7),
      options = list(
        title = "Please Select Desired Number",
        `live-search` = TRUE,
        style = c("background: #2f2d57; color: #ffffff;"))
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Upvotes: 0

Related Questions