Have pickerInput dropdown placed in front of confirmSweetAlert Buttons

[myoshih]

Hi All,

I'm trying to get the pickerInput dropdown placed in front of the confirmSweetAlert buttons, but using z-index within CSS doesn't appear to work. Any other suggestions?

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  actionButton(
    inputId = "launch",
    label = "Launch Confirm!"
  )
)

server <- function(input, output, session) {
  
  # Launch sweet alert confirmation
  observeEvent(input$launch, {
    confirmSweetAlert(
      session = session,
      inputId = "test",
      title = "This is a Test!",
      type = "info",
      text = tags$div(
        div(style="position: relative; z-index: 1;", pickerInput(
          inputId = "numbers",
          multiple = TRUE,
          choices = 1:5,
          width = "100%"
        )),
      closeOnClickOutside = FALSE,
      html = TRUE
    ))
  })

}

if (interactive())
  shinyApp(ui, server)

[nirgrahamuk]

The main thing I added was

 tags$style("div.swal2-actions{
             z-index:0;}")

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  tags$style("div.swal2-actions{
             z-index:0;}"),
  actionButton(
    inputId = "launch",
    label = "Launch Confirm!"
  )
)

server <- function(input, output, session) {
  
  # Launch sweet alert confirmation
  observeEvent(input$launch, {
    confirmSweetAlert(
      session = session,
      inputId = "test",
      title = "This is a Test!",
      type = "info",
      text =div(
        pickerInput(
          inputId = "numbers",
          multiple = TRUE,
          choices = 1:5,
          width = "100%"
        )),
        closeOnClickOutside = FALSE,
        html = TRUE
      )
  })
  
}

  shinyApp(ui, server)

[myoshih]

It works on my end! Thank you!

On a separate note, I tried adding it in-line as in, but it doesn't seem to work:

    div(style='div.swal2-actions{z-index:0;}',
      confirmSweetAlert(
      session = session,
      inputId = "test",
      title = "This is a Test!",
      type = "info",
      text =div(
        pickerInput(
          inputId = "numbers",
          multiple = TRUE,
          choices = 1:5,
          width = "100%"
        )),
      closeOnClickOutside = FALSE,
      html = TRUE
    ))

Any idea why that's the case?

[nirgrahamuk]

A div can be styled but that's not the same as setting css style rules for anything but that did; the style tag is for setting css rules. Its a pure css thing.

HTML style tag.