How to show selectInput options vertically in shinydashboard?

Question

I'm working with some app in shiny and I have a little issue with selectInput() . First the code for reprex:

library(shiny)
library(tidyverse)
library(shinydashboard)
library(plotly)


claves <- paste0(seq(1:32))

ui <- dashboardPage(skin = "red",
                    dashboardHeader(title="Example", titleWidth = 650),
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Resume", 
                                 menuSubItem("Dist", tabName = "dist"),
                                 menuSubItem("Sit", tabName = "sit")),
                        menuItem("Analysis",
                                 menuSubItem("XXX", tabName = "XXXX"),
                                 menuSubItem("XXX", tabName = "XXXXX")),
                        menuItem("NOMBRE_DOS", tabName = "")
                      )
                    ),
                    dashboardBody(
                      tags$head(tags$style(HTML('.box {margin: 5px;}'))),
                      tabItems(
                        tabItem("dist", "",
                                shinydashboard::box(width=12, 
                                                    "Distribution",
                                                    plotlyOutput("dist_clave")),
                                shinydashboard::box(width=12, "",
                                                    div(style="display: inline-block;vertical-align:top; width: 150px;",
                                                        selectInput("clave", "", 
                                                                    choices=claves, selected=c("1","2"),multiple=TRUE)),
                                                    tags$head(tags$style(HTML(".selectize-input {height: 55px; width: 960px; font-size: 12px;}"))))
                        ),
                        tabItem(
                          "sit", "",
                          shinydashboard::box(width=12, 
                                              "Situación",
                                              plotlyOutput("sit_plot")))
                      )
                    )
)

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

shinyApp(ui, server, options = list(launch.browser = TRUE))

If you run the app, the selectInput() box is placed as I want but the problem is because of that, user can't see properly the options since all of them are displayed from top to bottom (see image below). What I want to achieve is that options show vertically in order to be easier to select.

I feel the issue in this piece of code:

div(style="display: inline-block;vertical-align:top; width: 150px;",

but if I put "bottom" instead of "top" I get the exact same result.

I appreciate any idea of suggestion even if it implies to use a different kind of input selector.

Answer 1

In the example that following, I adjusted the css for.selectize-input

library(shiny)
library(tidyverse)
library(shinydashboard)
library(plotly)


claves <- paste0(seq(1:32))

ui <- dashboardPage(skin = "red",
                    dashboardHeader(title="Example", titleWidth = 650),
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Resume", 
                                 menuSubItem("Dist", tabName = "dist"),
                                 menuSubItem("Sit", tabName = "sit")),
                        menuItem("Analysis",
                                 menuSubItem("XXX", tabName = "XXXX"),
                                 menuSubItem("XXX", tabName = "XXXXX")),
                        menuItem("NOMBRE_DOS", tabName = "")
                      )
                    ),
                    dashboardBody(
                      tags$head(tags$style(HTML('.box {margin: 5px;}'))),
                      tabItems(
                        tabItem("dist", "",
                                shinydashboard::box(width=12, 
                                                    "Distribution",
                                                    plotlyOutput("dist_clave")),
                                shinydashboard::box(width=12, "",
                                                    # div(style="display: inline-block;vertical-align:top; width: 150px;",
                                                        selectInput("clave", "", 
                                                                    choices=claves, selected=c("1","2"),multiple=TRUE)
                                                        # )
                                                    ,
                                                    tags$head(tags$style(HTML(".selectize-input {display:inline-block;
   float:left;
   width:50px; 
   padding: 5px; }"))))
                        ),
                        tabItem(
                          "sit", "",
                          shinydashboard::box(width=12, 
                                              "Situación",
                                              plotlyOutput("sit_plot")))
                      )
                    )
)

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

shinyApp(ui, server, options = list(launch.browser = TRUE))