selectizeInput Dropdown gets clipped off

[MarkusBerroth]

Hey,

thank you very much for that useful shiny package. I am using it currently in a Shiny Application in a modal dialog. Everything worked fine so far. However, I am using a selectizeInput with a dropdown within shinyglide in a modal dialog. It is close to the bottom of the shinyglide/modal dialog element. And the dropdown gets clipped off, so only half of the first entry of the dropdown is readable. I think, it is due to that the selectizeInput is an element within shinyglide, but the dropdown spans beyond the modal dialog. Shinyglide uses overflow : hidden. So, as far as I understand, everything spanning beyond the modal dialog gets clipped off or more specifically is hidden. Thus, the selectizeInput is not really usable anymore. If I set overflow to visible, all other slides are already visible. So, my question is, is this a bug or the desired behavior? Are there any fixes / adjustments I could do within the CSS file maybe?

Thank you very much in advance!

[MarkusBerroth]

Sorry, I forgot to include a reproducible example in my initial post. The Fruits dropdown gets clipped off and one can only read half of the first entry "Apple". I am using shinyglide version 0.1.3.

library(shiny)
library(shinyglide)

input_list <- list("Apple", "Orange", "Banana", "Anananas", "Strawberry")

ui <- fixedPage(

  titlePanel("shinyglide modal example"),
  sidebarLayout(
    sidebarPanel(
      numericInput("mean", "Mean", value = 0),
      numericInput("sd", "Standard deviation", value = 1, min = 0),
      numericInput("n", "n", value = 100, min = 1),
    ),
    mainPanel(
      plotOutput("plot")
    )
  )

)

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

  modal_controls <- glideControls(
    list(
      prevButton(),
      firstButton(
        class = "btn btn-danger",
        `data-dismiss`="modal",
        "No, thanks !"
      )
    ),
    list(
      nextButton(),
      lastButton(
        class = "btn btn-success",
        `data-dismiss`="modal",
        "Done"
      )
    )
  )

  glide_modal <- modalDialog(
    title = "Startup assistant",
    easyClose = FALSE,
    footer = NULL,
    glide(
      custom_controls = modal_controls,
      screen(
        next_label = 'Yes, please ! <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>',
        p("Please select your fruit!"),
        br(),
        selectizeInput("select_fruit", choices = input_list, label = "Fruits")
      ),
      screen(
        p("First, please select a mean value"),
        numericInput("mean_modal", "Mean", value = 0)
      ),
      screen(
        p("Next, please select a standard deviation value"),
        numericInput("sd_modal", "Standard deviation", value = 1, min = 0)
      ),
      screen(
        p("Thanks, we're all set !")
      )
    )
  )

  showModal(glide_modal)

  output$plot <- renderPlot({
    hist(rnorm(req(input$n), req(input$mean), req(input$sd)),
         main = "Such wow",
         xlab = "Wonderful x values",
         ylab = "Incredible frequencies")
  })

  observe({
    updateNumericInput(session, "mean", value = input$mean_modal)
  })

  observe({
    updateNumericInput(session, "sd", value = input$sd_modal)
  })

}

shinyApp(ui, server)

[juba]

Hi,

Indeed, I don't think there is a good solution for this. A normal <select> would be displayed correctly, but selectizeInput uses a standard <div> for the dropdown, which follows the default CSS rules for HTML elements. Changing z-index doesn't do anything.

So beside using <select> or making sure there is enough vertical space for the dropdown to be displayed, the only workaround I can think of would be to force the dropdown to position: relative, which may modify the slide height when the dropdown is opened. Not sure it will work everywhere and far from ideal, but I fear I don't have a better solution.

.selectize-dropdown {
  position: relative !important;
}

Thanks for taking the time to create a reproducible example !