carlganz / rintrojs

Wrapper for the Intro.js library
http://rintrojs.carlganz.com/
GNU Affero General Public License v3.0
133 stars 11 forks source link

Introjs modal not working when scrolled down #55

Open StanWijn opened 2 years ago

StanWijn commented 2 years ago

I posted this issue on StackOverflow and already have a work-around, but if this issue is more common it might be useful to adress it. https://stackoverflow.com/questions/73232882/r-introjs-modal-not-working-when-scrolled-down/

We have a large shiny application that uses multiple horizontally stacked sections. On the last section (bottom of the page) I have a modal. Inside this modal I want to use rintrojs to guide the user. The introjs does not seem to work when the modal is opened at the bottom of the page. The grey overlay will show, but the elements are not highlighed or the button pop-up will show.

Example:

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)

intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal'))

ui <- shinyUI(fluidPage(
  dashboardPage(dashboardHeader(title = "Test"),
                dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
                dashboardBody(tabItems(tabItem("item1", 
                                              rep(br(), 10000), # remove this line and introjs will work

                                               actionButton("bttn", "start intro"))))),

  introjsUI()
))

server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })

  output$plot_box <- renderUI({
    box(id = 'box',
        div(id = "bttn2_intro", actionButton('bttn2', 'dummy')),
        plotOutput('plot'), width = '100%'
    )
  })

  observeEvent(input$bttn,{
    showModal(modalDialog(uiOutput('plot_box')))
  })

  observeEvent(input$bttn2, {
    introjs(session, options = list(steps = intro_df))
  })

})
shinyApp(ui = ui, server = server)