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.

If it really is a bug, i.e the behavior is different than what is documented, then contacting the package maintainer is the recommended path. That is, unless the maintainer has stated somewhere that posting on SO is the correct strategy. — IRTFM, Oct 17 '16 at 02:37

score 32 · Accepted Answer · answered Oct 18 '16 at 03:05

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)

One issue with split layout is if the text for an option inside the select input component is very long, it does not flow into the next line. Using a fluidRow in this case resolves this issue as mentioned by rafaelmarino in https://github.com/rstudio/shiny/issues/1531 — Rg90, Oct 15 '18 at 09:05

score 8 · Answer 2 · answered Jul 01 '20 at 11:18

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")
)

Shiny splitLayout and selectInput issue

2 Answers2

Linked