How to control the size of selectInput drop-down

shiny
1

I have created a selectInput() widget that reads the files in the specified directory and displays them for multiple selection. I would like for the input box to be wider and the displayed list to be wider and longer so that the user can see all the files for selection. I have tried many things but I cannot get it to work. Could you please tell me how this is done?

library(shiny)
library(reprex)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(width = 12, offset = 0, div(style = "height:50px"),
               setwd("~/Development/Dir/OUT/openMS/INPUT_DATA/"),
               selectInput('selectfile','Select File', choice = list.files(),multiple = TRUE, width = "300px"),
               textOutput('fileselected'),
               setwd("~/Development/Dir")
        )
      )
  ),
  mainPanel(
  )
)

)
server <- function(input, output){
  
  output$fileselected <- renderText({
    paste0('You have selected: ', input$selectfile)
  })

}

shinyApp(ui = ui, server = server)
2

I was able to increase the size of the drop-down, but still do not know how to increase the size of the input box.

library(shiny)
library(reprex)


ui <- fluidPage(
   sidebarLayout(
     sidebarPanel(
        tags$style(type='text/css',
                   ".selectize-dropdown-content{
                 height: 1000px;
                 width: 1000px;
                 background-color: #b0c4de;
                }"),
       setwd("~/Development/Dir/OUT/openMS/INPUT_DATA/"),    
       
       selectInput('selectfile','Select File', choice = list.files(),multiple = TRUE),      

       textOutput('fileselected'),
       setwd("~/Development/Dir") 
       ),
     mainPanel(
       
       
     )
    )
   )

server <- function(input, output){
  
  output$fileselected <- renderText({
    paste0('You have selected: ', input$selectfile)
  })

}

shinyApp(ui = ui, server = server)
3

The below should help you. Also, CSS is good to know about but probably not necessary for what you are trying to accomplish. setting the width of "selectInput" to a percent value, it will take up that percent of the enclosing element (in this case "column" which in turn is enclosed and width ultimately limited by the "sidebarPanel").


library(shiny)
  
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(width = 12, offset = 0,
               setwd("~/Development/Dir/OUT/openMS/INPUT_DATA/"),    
               selectInput('selectfile','Select File', choice = list.files(),multiple = TRUE, width = "100%"),
               p('You have selected: ', verbatimTextOutput('fileselected')), # p represents a HTML <p> element
               setwd("~/Development/Dir") 
               
        )
      )
    ),
    mainPanel(
    )
  )
  
)
server <- function(input, output){
  
  output$fileselected <- renderPrint({  # Change renderText to renderPrint
    # make each selection print on a new line
    cat(input$selectfile, sep="\n")
     
  })
  
}

shinyApp(ui = ui, server = server)
4

I have an app where I made the dropdown large and spacious. You can see it here. If you want to replicate it or get ideas, you can look at the source code here (the CSS is in there)

1 Like
5

Thanks very much!

Giuseppa