0

The pickerInput function from the shinyWidgets package doesn't display the whole complete list of choices, the same thing happens with the original selectInput function from the shiny package. The image of what is happening is below.

Changed browsers from safari to chrome but still the same issue. safari version 14.1 and chrome version Version 90.0.4430.212. I also uninstalled and reinstalled shiny but same result. any suggestions please

enter image description here

code used is below

fluidRow(column(width = 3, id ="column_selector1"),
                         column(width = 9, id ="column_selector2",
                    splitLayout(cellWidths = c("25%", "25%", "35%","15%"),
                                #cellArgs = list(style = "padding: 5px"),
                                pickerInput("months",label = NULL, choices = months_list, multiple = T, selected = NULL,options = list(title = "Months",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                                pickerInput("years",label = NULL,choices = years_list, multiple = T,selected = "2021", options = list(title = "Years",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                                pickerInput("state",label = NULL, choices = states$state_name, multiple = T,selected = states$state_name, options = list(title = "State",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                                                                                                           
                                actionButton("update",label = "Update",style = "bordered", color = "success")
                    )
                    ))

There CSS code I used (I am a newbie to css)

}
#column_about_us,#column_selector1,#column_selector2 {
  background-color: #d5ebf2;
  border-radius: none;
  margin: none;
  height: none; width: none;
 /* box-shadow: none;*/
}
.col-sm-5{background-color: #ebf5f5;
                   /* border:2px solid #16c0f2;
                    border-style: outset;*/
                    border-radius: 5px;
                     margin: 5px 3px;
                      height: 200px;width: 24%;
                      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
            }

Below is what I want to achieve.

enter image description here

Thank you in advance.

Amanyiraho Robinson
  • 141
  • 1
  • 5
  • Answer [here](https://stackoverflow.com/questions/67408532/selectinput-choices-are-hidden-behind-downloadbutton-in-shiny-app) might help you. – YBS May 21 '21 at 14:53

1 Answers1

1

One way to do it (to keep splitLayout) is given below.

fluidRow(column(width = 3, id ="column_selector1"),
         column(width = 9, id ="column_selector2",
                splitLayout(cellWidths = c("25%", "25%", "35%","15%"),
                            #cellArgs = list(style = "padding: 5px"),
                            pickerInput("months",label = NULL, choices = months_list, multiple = T, selected = NULL,options = list(title = "Months",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                            pickerInput("years",label = NULL,choices = years_list, multiple = T,selected = "2021", options = list(title = "Years",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                            pickerInput("state",label = NULL, choices = states$state_name, multiple = T,selected = states$state_name, options = list(title = "State",`actions-box` = TRUE,size = 10,`selected-text-format` = "count > 2")),
                            
                            actionButton("update",label = "Update",style = "bordered", color = "success"),
                            tags$head(tags$style(HTML(" .shiny-split-layout > div {
                                 overflow: visible;
                              }
                              ")))
                )
         ))

Credit goes to Xiongbing Jin, and see his answer here

YBS
  • 19,324
  • 2
  • 9
  • 27