Shiny splitLayout and selectInput issue

15
votes

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.

2
rshiny
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

2 Answers

27
votes

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)
4
votes

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