Shiny splitLayout and selectInput issue

Question

When I combine the splitLayout and selectInput in R Shiny, there is something wrong.

The dropdown list of choices cannot be displayed properly.

How can we address this issue.

Please check the reproducible code.

library(shiny)

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

  output$select_1 = renderUI({
    selectInput("select_input","select", choices = LETTERS)
  })



}

ui <- fluidPage(
  splitLayout(
    uiOutput("select_1")
  )
)

shinyApp(ui = ui, server = server)

I have 8 selectInputs that I want to place evenly side by side in one row.

Using fluidrow is not OK because the column width can only be integers.

I wonder if there is any alternative way to do this.

Answer 1

Here is a potential fix. It appears that the parent div of the dropdown menu has an overflow: auto style, which blocks the dropdown menu. Changing to visible fixes it.

library(shiny)

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

  output$select_1 <- renderUI({
    selectInput("select_input","select", choices = LETTERS)
  })

}

ui <- fluidPage(
  splitLayout(
    uiOutput("select_1"),
    tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                overflow: visible;
                              }
                              ")))
  )
)

shinyApp(ui = ui, server = server)

Answer 2

I tried the solution of @Xiongbing Jin, but that didn't fully resolve the issue for me, but pushed my to this solution:

# in ui.R
splitLayout(
  tags$head(tags$style(HTML(".shiny-split-layout > div {overflow: visible;}"))),
  cellWidths = c("0%","50%", "50%"), # note the 0% here at position zero...
  selectInput("A", label = "A LBL",),
  selectInput("B", label = "B LBL")
)