particlesjs icon indicating copy to clipboard operation
particlesjs copied to clipboard

Particles in modalDialog

Open ivokwee opened this issue 5 years ago • 2 comments

Hi. I am trying to use particles as background in a modalDialog but nothing shows. What can be wrong? Code is below.

Ivo

library(shiny)
library(shinyparticles)

server <- function(input,output) {            
    output$ui <- renderUI({
        showModal(modalDialog(
            div(id="particles-target", h1("Hello World"),
                style="height: 400px; width: 600px;"),
            size="l" 
        ))
    })

}

ui <- fluidPage(
    uiOutput('ui'),
    particles(target_id="particles-target")
)

shinyApp(ui, server)

ivokwee avatar Oct 13 '19 19:10 ivokwee

Hello,

There's an issue initializing particles when DOM elements are not completely initialized. I added a timeout argument to wait before creating particles.

Re-install package from GitHub, and try example below. I added position: absolute; to the H1 tag to make it appear above particles. timeout = 1000 means "wait 1000ms before creating particles".

library(shiny)
library(shinyparticles)

server <- function(input,output) {            
  
  observeEvent(input$show_modal, {
    showModal(modalDialog(
      tags$div(
        id="particles-target", 
        tags$h1("Hello World", style = "position:absolute;"),
        style="height: 400px; width: 100%;"
      ),
      particles(target_id = "particles-target", timeout = 1000),
      size="l" 
    ))
  })
  
}

ui <- fluidPage(
 actionButton("show_modal", "Show modal")
)

shinyApp(ui, server)

Let me know if it works for you

Victor

pvictor avatar Oct 14 '19 08:10 pvictor

It works!!! thanks a lot.

bigomics avatar Oct 14 '19 12:10 bigomics